@font-face {
    font-family: 'Continuum';
    src: url('../css/Contm___.ttf') format('woff2');
}

@font-face {
    font-family: 'Helvetica';
    src: url('../css/HelveticaNeueMedium.otf') format('woff2');
}

:root {
    font-size: 20px;
    /* font-weight: bold; */
    font-family: 'Continuum', Verdana, Geneva, Tahoma, sans-serif;
}

/* ================= Carousel Auto-scroll ================= */

.carousel-gallery-auto {
    margin: auto;
    font-size: 16px;
    width: clamp(30em, 20vw, 50em);
    height: clamp(10em, 40vh, 40em);
    position: relative;
    bottom: 0;
    right: 6rem;
    align-items: center;
    justify-content: center;
}

.carousel-gallery-auto img {
    border-radius: 15px;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: contain;
    animation: carousel-auto-scroll calc(var(--nb-item) * 5s) infinite;
    animation-delay: calc(var(--item) * 5s);
}

@keyframes carousel-auto-scroll {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    10% {
        transform: translateX(0);
        opacity: 1;
    }

    20% {
        transform: translateX(0);
        opacity: 1;
    }

    30% {
        transform: translateX(-100px);
        opacity: 0;
    }
}

@media screen and (max-width: 800px) {
    .carousel-gallery-auto {
        right: 0;
        transform: scale(.8);
    }

}