/* ==========================
        Banner (home hero)
   ==========================
   Layered beneath the .homepage-header ::before overlay (z-index 1) and ::after
   gradient (z-index 2) declared in header.css, so those effects apply to image,
   slider and video backgrounds alike. */

.banner-video,
.banner-slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

    .banner-slide.is-active {
        opacity: 1;
    }

/* Content and search bar sit above both overlays.
   Note: only z-index is set here. The search bar's own `position: absolute`
   (searchbar.css) takes it out of the flex flow so .header-content stays centred;
   overriding position here would drop it back into the flow and push the title aside. */
.banner .header-content {
    position: relative;
    z-index: 3;
}

.banner .row-bottom {
    z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
    .banner-slide {
        transition: none;
    }
}