.medewerkers_zeggen .medewerkers_zeggen_items{
    row-gap: var(--bs-gutter-x);
}

.medewerkers_zeggen .medewerkers_zeggen_kaart{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    hyphens: auto;
    gap: calc(var(--bs-gutter-x) * 2 / 3);
    padding: var(--bs-gutter-x);
    background: var(--wit);
    color: var(--zwart);
    /* Figma's one-pixel card outline. */
    border: 0.1rem solid color-mix(in srgb, var(--zwart) 10%, var(--wit));
}

.medewerkers_zeggen .medewerkers_zeggen_foto{
    /* Figma portrait: 100px, capped by the available card width. */
    width: min(100%, 10rem);
    aspect-ratio: 1;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 20%;
}

.medewerkers_zeggen .medewerkers_zeggen_foto picture,
.medewerkers_zeggen .medewerkers_zeggen_foto img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.medewerkers_zeggen .medewerkers_zeggen_quote{
    /* Replace Bootstrap's blockquote margin with the card gap. */
    margin: 0;
}

.medewerkers_zeggen .medewerkers_zeggen_persoon{
    margin-top: auto;
}

.medewerkers_zeggen .medewerkers_zeggen_persoon > div + div{
    margin-top: calc(var(--bs-gutter-x) / 6);
}

.medewerkers_zeggen .medewerkers_zeggen_functie{
    color: color-mix(in srgb, var(--zwart) 75%, var(--wit));
}

.medewerkers_zeggen .medewerkers_zeggen_slider{
    /* Override Tiny Slider's inline-block track; keep equal-height Bootstrap cards. */
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    margin: 0;
    cursor: grab;
    user-select: none;
}

.medewerkers_zeggen .medewerkers_zeggen_slider:active{
    cursor: grabbing;
}

.medewerkers_zeggen .medewerkers_zeggen_slider > .medewerkers_zeggen_item{
    /* Three cards plus a quarter of the next; Tiny Slider measures these widths. */
    width: calc(100% / 3.25);
    padding-left: 0;
    padding-right: var(--bs-gutter-x);
}

.medewerkers_zeggen .content_gekaderd_inner:focus-visible{
    /* Keep the focus indicator stationary when the inner track moves. */
    outline: 0.2rem solid var(--groen);
    outline-offset: 0.2rem;
}

@media (max-width:767px){
    .medewerkers_zeggen .medewerkers_zeggen_slider > .medewerkers_zeggen_item{
        width: calc(100% / 1.25);
    }
}

@media (min-width:768px) and (max-width:991px){
    .medewerkers_zeggen .medewerkers_zeggen_slider > .medewerkers_zeggen_item{
        width: calc(100% / 2.25);
    }
}