#carousel {
    --image-count: 5;
    --image-width: 2048;
    --carousel-animation-speed: 26s;
    --fade-in-out-duration: 2s;

    position: relative;
    width: 100vw;
    overflow: hidden;
}

#carousel .hero {
    width: 100vw;
}

/*  animated image carousell in background of the hero section: */
#carousel #carousel-track {
    width: calc(var(--image-count) * var(--image-width));
    display: flex;
    position: relative;

    animation: hero-carousel var(--carousel-animation-speed) ease 0s infinite;
}

@keyframes hero-carousel {
    0% {
        left: 0vw;
    }

    21% {
        left: 0vw;
    }

    25% {
        left: -100vw;
    }

    46% {
        left: -100vw;
    }

    50% {
        left: -200vw;
    }

    71% {
        left: -200vw;
    }

    75% {
        left: -300vw;
    }

    96% {
        left: -300vw;
    }

    100% {
        left: -400vw;
    }
}

#carousel #fader {
    width: 100%;
    height: auto;
    display: block;
}