#image-carousel {
	--count: 0;

	content-visibility: auto;

	.carousel {
	    overflow: hidden;
	    white-space: nowrap;
	    position: relative;
	}

	.carousel-slide {
	    display: inline-flex;
	    gap: 24px;
	    animation: calc(10s * var(--count)) scroll infinite linear;
	}

	.carousel-slide:first-child {
	    margin-right: 24px;
	}

	.carousel-track { 
	    flex-shrink: 0;
	    border-radius: 24px;
	    aspect-ratio: 1 / 0.7;
	    overflow: hidden;
	    height: 400px;
	    border: 3px solid #222222;
	    background-size: cover;
	    background-position: center;

        @media only screen and (max-width: 980px) {
	    	height: 270px;
        }
	}

	.circle-btn-container {
	    margin: auto;
	    text-align: center;
	    margin-top: 24px;
	}

	&[data-direction="right"] {
		.carousel-slide {
		    animation-direction: reverse;
		}		
	}
}


@keyframes scroll {
    from {
        transform: translateX(0);
    }
    
    to {

        transform: translateX(-100%);
    }
}


@keyframes scroll-right {
    from {
        transform: translateX(100%);
    }
    
    to {

        transform: translateX(0);
    }
}