.kg-kaarten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: var(--wp--preset--spacing--30);
}
.kg-kaart {
display: flex;
flex-direction: column;
padding: var(--wp--preset--spacing--40);
background: var(--wp--preset--color--surface);
border-top: 3px solid var(--kg-groep, var(--wp--preset--color--accent));
color: var(--kg-tekst);
text-decoration: none;
}
.kg-kaart:hover,
.kg-kaart:focus-visible,
.kg-kaart[data-inbeeld] {
background: color-mix(in srgb, var(--kg-groep) 14%, var(--wp--preset--color--surface));
text-decoration: none;
}
.kg-kaart[data-groep="jeugd"]       { --kg-groep: var(--wp--custom--groep--jeugd); }
.kg-kaart[data-groep="volwassenen"] { --kg-groep: var(--wp--custom--groep--volwassenen); }
.kg-kaart[data-groep="persoonlijk"] { --kg-groep: var(--wp--custom--groep--persoonlijk); }
.kg-kaart__beeld {
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
margin-bottom: var(--wp--preset--spacing--30);
background:
repeating-linear-gradient(45deg,
color-mix(in srgb, var(--kg-groep) 22%, transparent) 0 12px,
transparent 12px 24px);
transform-style: preserve-3d;
}
.kg-kaart__beeld:has(.kg-kaart__foto) {
aspect-ratio: auto;
}
.kg-kaart__beeld picture {
display: contents;
}
.kg-kaart__foto {
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(
0
calc(14px + var(--kg-vooruit) * 0.25)
calc(26px + var(--kg-vooruit) * 0.4)
rgb(0 0 0 / 0.55));
}
@media (max-width: 600px) {
.kg-kaart__foto {
max-height: min(76vw, 20rem);
}
}
.kg-kaart__meta {
color: var(--kg-zacht);
font-size: 0.8125rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.kg-kaart__titel {
margin-top: 0.35rem;
font-family: var(--wp--preset--font-family--display);
font-size: 1.75rem;
font-weight: 800;
text-transform: uppercase;
}
.kg-kaart__tekst {
margin-top: 0.6rem;
color: var(--kg-tekst);
line-height: 1.55;
}
.kg-kaart__pijl {
margin-top: auto;
padding-top: var(--wp--preset--spacing--30);
color: var(--kg-rood);
font-size: var(--wp--custom--tekst--klein);
font-weight: 600;
}
.kg-kaart__pijl::after {
content: " \2197";
}
@media (hover: none) {
.kg-kaart[data-kantel] {
--kg-kantel: 0deg;
--kg-diepte: 600px;
--kg-groei: 1.01;
--kg-hef: -2px;
--kg-voor: 34px;
--kg-fotokantel: 16deg;
}
.kg-kaart__foto[data-kantel-voor] {
transform: none;
translate: 0 0 var(--kg-vooruit);
rotate: x calc(var(--kg-my) * var(--kg-fotokantel) * -1);
transition:
translate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
rotate 0.12s ease-out,
filter 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
}