/**
 * Hero: met galerij/slider (bibliotheek: .hero-gallery, gevolgd door een
 * rij met de Afbeeldingen-slider) en .ptrn-herobigimage (kop links,
 * tekst rechts, foto eronder).
 *
 * Figma: SECTIONS → Hero → "Carousel Centered" / "Splitscreen": verloop
 * en witte tekst (hero-_basis.css); de foto's vallen over de onderkant
 * van het verloop (overlap regelt de plugin) en hebben dezelfde afronding.
 */

.hero-gallery {
    text-align: center;

    :is(.kb-buttons-wrap, .kb-btns-outer-wrap) {
        justify-content: center;
    }
}

.hero-gallery + .kb-row-layout-wrap .carmel-image-slider__slide,
.hero-gallery + .kb-row-layout-wrap .carmel-image-slider__slide img {
    border-radius: var(--alma-hero-radius);
    overflow: hidden;
}

/* Breder dan de plugin (vast 920px, onder 700px maar 220px) en
   meeschalend met het scherm: 62,5% (1000px op 1600, max. 1200px), op
   tablet en mobiel 75%. Anders wordt de middelste foto smal en zie je
   vooral de buren. De hoogtes (465/380, mobiel 400/340) komen uit de
   plugin (view.js). */
.hero-gallery + .kb-row-layout-wrap .carmel-image-slider__slide {
    flex-basis: min(62.5vw, 1200px) !important;
}

@media (max-width: 1024px) {
    .hero-gallery + .kb-row-layout-wrap .carmel-image-slider__slide {
        flex-basis: 75vw !important;
    }
}