/* Keep the first paint and the initialized carousel in the same layout. */
.headerSlider.owl-carousel:not(.owl-loaded) {
    display: grid;
}
.headerSlider.owl-carousel:not(.owl-loaded) > .hero,
.headerSlider.owl-carousel:not(.owl-loaded) > .headerImage {
    grid-area: 1 / 1;
    min-width: 0;
    max-width: 100%;
    visibility: hidden;
}
.headerSlider.owl-carousel:not(.owl-loaded) > :first-child {
    visibility: visible;
}

/* A real image lets the browser discover and prioritize the first hero. */
.hero .heroPicture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.hero .heroPicture img.heroImage {
    display: block !important;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
}
@media screen and (max-width: 719px) {
    .hero .heroPicture {
        position: relative;
        height: auto;
        aspect-ratio: 3 / 2;
    }
    .hero .heroPicture img.heroImage {
        position: absolute;
        inset: 0;
    }
}