.mobile-hero {

    display: none;

}

.slideshow {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

}

.slide {

    position: absolute;
    inset: 0;
    opacity: 0;
    animation: fade 40s infinite;

}

.slide:not(.poster) {

    object-fit: cover;
    width: 100%;
    height: 100%;
    background: #212121;

}

.slide.poster {

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #212121;

}

.slide.poster img {

    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

}

.s1 { animation-delay: 0s; }
.s2 { animation-delay: 5s; }
.s3 { animation-delay: 10s; }
.s4 { animation-delay: 15s; }
.s5 { animation-delay: 20s; }
.s6 { animation-delay: 25s; }
.s7 { animation-delay: 30s; }
.s8 { animation-delay: 35s; }

@keyframes fade {

    0%   { opacity: 0; }
    5%   { opacity: 1; }
    30%  { opacity: 1; }
    35%  { opacity: 0; }
    100% { opacity: 0; }

}

.mobile-hero {

    display: none;

}

@media (max-width: 768px) {

    .slideshow {
        
        display: none;

    }

    .mobile-hero {

        display: flex;
        justify-content: center;
        align-items: center;

        height: calc(100vh - 56px); 
        width: 100vw;

    }

    .mobile-hero img {

        max-height: 100%;
        max-width: 100%;
        height: auto;
        width: auto;
        object-fit: contain;
        display: block;
        
    }
}