.kg-teamloop {
--kg-kaart: clamp(10rem, 19vw, 17rem);
--kg-tussen: clamp(0.75rem, 1.4vw, 1.25rem);
--kg-rand: clamp(1.5rem, 5%, 4rem);
--kg-knoprij: 0rem;
position: relative;
margin-top: var(--wp--preset--spacing--40);
padding-top: var(--kg-knoprij);
}
.kg-teamloop--js::before,
.kg-teamloop--js::after {
content: "";
position: absolute;
inset-block: var(--kg-knoprij) 0;
z-index: 1;
width: var(--kg-rand);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.kg-teamloop--js::before {
left: 0;
background: linear-gradient(to right,
var(--wp--preset--color--surface),
transparent);
}
.kg-teamloop--js::after {
right: 0;
background: linear-gradient(to left,
var(--wp--preset--color--surface),
transparent);
}
.kg-teamloop--terug::before,
.kg-teamloop--verder::after {
opacity: 1;
}
.kg-teamloop__rij {
padding-block: 1.25rem 0.75rem;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.kg-teamloop__rij::-webkit-scrollbar {
display: none;
}
.kg-teamloop__spoor {
display: flex;
width: max-content;
margin: 0;
padding: 0;
list-style: none;
}
@media (hover: hover) and (pointer: fine) {
.kg-teamloop--js .kg-teamloop__rij {
cursor: grab;
}
.kg-teamloop__rij.is-slepen,
.kg-teamloop__rij.is-slepen * {
cursor: grabbing;
}
}
.kg-teamloop__rij.is-slepen {
scroll-snap-type: none;
-webkit-user-select: none;
user-select: none;
}
.kg-teamloop__rij.is-slepen [data-kantel],
.kg-teamloop__rij.is-slepen [data-kantel-voor] {
transform: none;
}
.kg-teamloop__pijl {
display: none;
}
@media (hover: hover) and (pointer: fine) {
.kg-teamloop {
--kg-knoprij: 2.25rem;
}
.kg-teamloop--js .kg-teamloop__pijl {
position: absolute;
top: 0;
z-index: 2;
display: grid;
place-items: center;
width: var(--kg-knoprij);
height: var(--kg-knoprij);
padding: 0;
border: 0;
background: none;
color: var(--kg-zacht);
opacity: 0.32;
pointer-events: none;
transition:
opacity 0.2s ease,
color 0.18s ease;
}
.kg-teamloop__pijl--terug {
right: var(--kg-knoprij);
}
.kg-teamloop__pijl--verder {
right: 0;
}
.kg-teamloop--terug .kg-teamloop__pijl--terug,
.kg-teamloop--verder .kg-teamloop__pijl--verder {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
.kg-teamloop--terug .kg-teamloop__pijl--terug:hover,
.kg-teamloop--verder .kg-teamloop__pijl--verder:hover {
color: var(--kg-rood);
}
.kg-teamloop--js:not(.kg-teamloop--terug):not(.kg-teamloop--verder) .kg-teamloop__pijl {
display: none;
}
}
.kg-teamloop__lid {
display: flex;
flex: 0 0 var(--kg-kaart);
margin-inline-end: var(--kg-tussen);
scroll-snap-align: start;
}
.kg-teamloop__kaart {
display: flex;
flex: 1;
flex-direction: column;
padding: var(--wp--preset--spacing--30);
background: var(--wp--preset--color--base);
border-top: 3px solid var(--kg-kleur, var(--wp--preset--color--accent));
color: inherit;
text-decoration: none;
}
.kg-teamloop__kaart:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 3px;
}
.kg-teamloop__kaart[data-kantel] {
--kg-diepte: 900px;
--kg-kantel: 10deg;
--kg-groei: 1.04;
--kg-hef: -6px;
--kg-voor: 30px;
}
.kg-teamloop__kaart[data-kantel]:not(:hover):not(:focus-visible) {
transform: none;
}
.kg-teamloop__kaart:not(:hover):not(:focus-visible) .kg-teamloop__foto[data-kantel-voor] {
transform: none;
}
.kg-teamloop__beeld {
display: block;
aspect-ratio: 3 / 4;
background:
repeating-linear-gradient(45deg,
color-mix(in srgb, var(--kg-kleur, var(--wp--preset--color--accent)) 16%, transparent) 0 12px,
transparent 12px 24px),
color-mix(in srgb, var(--wp--preset--color--surface) 60%, var(--wp--preset--color--base));
transform-style: preserve-3d;
}
.kg-teamloop__beeld picture {
display: contents;
}
.kg-teamloop__foto {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
filter: drop-shadow(
0
calc(10px + var(--kg-vooruit, 0px) * 0.25)
calc(20px + var(--kg-vooruit, 0px) * 0.4)
rgb(0 0 0 / 0.55));
}
.kg-teamloop__woord {
display: block;
margin-top: 0.85rem;
}
.kg-teamloop__naam {
display: block;
color: var(--kg-tekst);
font-family: var(--wp--preset--font-family--display);
font-size: clamp(0.9375rem, 0.4vw + 0.8rem, 1.125rem);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.15;
text-transform: uppercase;
}
.kg-teamloop__rol {
display: block;
margin-top: 0.2rem;
color: var(--kg-zacht);
font-size: var(--wp--custom--tekst--meta);
line-height: 1.3;
}
.kg-teamloop__verder {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
margin-top: var(--wp--preset--spacing--40);
padding-bottom: 0.3rem;
border-bottom: 1px solid var(--kg-rand);
color: var(--kg-tekst);
font-family: var(--wp--preset--font-family--display);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
text-transform: uppercase;
transition: color 0.18s ease, border-color 0.18s ease;
}
.kg-teamloop__verder::after {
content: "\2192";
font-size: 1.1em;
transition: translate 0.18s ease;
}
.kg-teamloop__verder:hover,
.kg-teamloop__verder:focus-visible {
color: var(--kg-rood);
border-color: var(--wp--preset--color--accent);
text-decoration: none;
}
.kg-teamloop__verder:hover::after {
translate: 0.25rem 0;
}
.kg-teamloop__verder:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 4px;
}