html, body {
    margin: 0;
    padding: 0;
}

.hero-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

@keyframes slideshow {
    0% { opacity: 0; }
    5% { opacity: 1; }
    33% { opacity: 1; }
    38% { opacity: 0; }
    100% { opacity: 0; }
}

.hero-slide:nth-child(1) { animation: slideshow 16s infinite; }
.hero-slide:nth-child(2) { animation: slideshow 16s infinite 4s; }
.hero-slide:nth-child(3) { animation: slideshow 16s infinite 8s; }
.hero-slide:nth-child(4) { animation: slideshow 16s infinite 12s; }