@keyframes scroll {
	0%   {transform: translate(0%, 0%);}
	100% {transform: translate(-610%, 0%);}
}

.carousel-container {
	--card-size: 450px;
	overflow-x: auto;
	overflow-y: visible;
	display: flex;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	width: 100%;
	height: calc(var(--card-size) + 10px);
}


.carousel-container > * {
	animation: scroll 22.1s linear -1s infinite normal forwards;
	height: var(--card-size);
	width: var(--card-size);
	margin-right: 5px;
	margin-top: 5px;
	flex-shrink: 0;
	scroll-snap-align: start;
}

.blue {
	background: blue;
}


.carousel-container:hover > * {
	animation-play-state: paused;
}