/*
 * Hero slider type — per-type overrides (scoped under .rsl-slider--hero).
 *
 * Height model: landscape on desktop, portrait on mobile. The height is set on
 * the slider CONTAINER (not the slide) so it survives Swiper's fade effect
 * (which absolutely-positions the slides) and so the scoped selector out-weighs
 * generic theme rules on `.rsl-slide`. Desktop/mobile background switching is
 * handled per slide by the template's inline CSS.
 */
.rsl-slider--hero .rsl-slider {
    height: 81vh;
}

.rsl-slider--hero .rsl-slide {
    height: 100%;
}

/* Tablet */
@media (max-width: 980px) {
    .rsl-slider--hero .rsl-slider {
        height: 85vh;
    }
}

/* Mobile — portrait */
@media (max-width: 768px) {
    .rsl-slider--hero .rsl-slider {
        height: 80vh;
    }
}

/* Small mobile — portrait */
@media (max-width: 600px) {
    .rsl-slider--hero .rsl-slider {
        height: 75vh;
    }
}