.component-cards {
--component-card-accent: var(--wp--preset--color--primary, #0868d7);
--component-card-icon-background: var(--wp--preset--color--sky-light, #eef6ff);
--component-card-border: #dfe5ec;
--component-card-background: #ffffff;
--component-card-muted: #5c6572;
}
.component-cards > h2 {
margin-bottom: 0;
}
.component-cards__section + .component-cards__section {
margin-top: clamp(3rem, 6vw, 5rem);
}
.component-cards__section-title {
position: relative;
margin: 0 0 clamp(1.5rem, 3vw, 2rem);
padding-left: 1.25rem;
font-size: clamp(1.5rem, 1.3rem + 0.55vw, 2rem);
line-height: 1.2;
}
.component-cards__section-title::before {
content: "";
position: absolute;
top: 0.1em;
bottom: 0.1em;
left: 0;
width: 0.25rem;
border-radius: 1rem;
background: var(--component-card-accent);
}
.component-cards__grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2.25vw, 1.75rem) !important;
margin: 0;
}
.component-cards__grid--single {
grid-template-columns: minmax(0, 1fr);
}
.component-card {
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
margin: 0;
padding: clamp(1.25rem, 2.5vw, 2rem);
border: 1px solid var(--component-card-border);
border-radius: var(--wp--custom--radius--default, 1rem);
background: var(--component-card-background);
box-shadow: 0 0.75rem 2.25rem rgb(25 46 73 / 6%);
}
.component-card__header {
display: flex;
align-items: center;
gap: clamp(0.875rem, 2vw, 1.25rem) !important;
margin: 0 0 1.125rem;
}
.component-card__icon {
display: grid;
flex: 0 0 4rem;
place-items: center;
width: 4rem;
height: 4rem;
margin: 0 !important;
border: 1px solid rgb(8 104 215 / 10%);
border-radius: 1rem;
background:
linear-gradient(145deg, rgb(255 255 255 / 85%), transparent),
var(--component-card-icon-background);
}
.component-card__icon img,
.component-card__icon img[src$=".svg"] {
display: block;
width: 2.5rem !important;
height: 2.5rem !important;
min-width: 0;
object-fit: contain;
}
.component-card__title {
margin: 0;
font-size: clamp(1.2rem, 1.08rem + 0.3vw, 1.45rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.015em;
}
.component-card__text {
margin: 0;
color: var(--component-card-muted);
font-size: clamp(1rem, 0.97rem + 0.12vw, 1.075rem);
font-weight: 400;
line-height: 1.65;
}
.component-card__text strong {
color: var(--wp--preset--color--black, #111111);
font-weight: 600;
}
@media (max-width: 781px) {
.component-cards__grid {
grid-template-columns: minmax(0, 1fr);
}
.component-cards__section + .component-cards__section {
margin-top: 3rem;
}
}
@media (max-width: 480px) {
.component-card {
padding: 1.25rem;
}
.component-card__header {
align-items: flex-start;
}
.component-card__icon {
flex-basis: 3.5rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 0.875rem;
}
.component-card__icon img,
.component-card__icon img[src$=".svg"] {
width: 2.25rem !important;
height: 2.25rem !important;
}
}