.scroller-container {
	--slide-width: clamp(150px, 20vw, 300px);
	--slide-gap: calc(var(--slide-width) * 0.06);
	--slide-border-radius: calc(var(--slide-width) * 0.06);

	overflow: hidden;
	width: 90vw;
	position: relative;

	&::before {
		position: absolute;
		content: "";
		width: var(--slide-width);
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 1;

		background: linear-gradient(90deg, var(--background-color), transparent);
	}
	&::after {
		position: absolute;
		content: "";
		width: var(--slide-width);
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;

		background: linear-gradient(90deg, transparent, var(--background-color));
	}
}

.scroller-wrapper {
	margin-top:100px;
	display: flex;
	justify-content: flex-start;
	gap: var(--slide-gap);
	width: calc((var(--slide-width) + var(--slide-gap)) * 6);

	animation: moveLeft 30s linear infinite;
}

.scroller-slide {
	opacity: 0.7;
	flex: none;
	width: var(--slide-width);
	aspect-ratio: 16/9;
	background: #000000;
	border-radius: var(--slide-border-radius);
	overflow: hidden;
	cursor: pointer;
}

@keyframes moveLeft {
	from {
		transform: translatex(0);
	}
	to {
		transform: translatex(-100%);
	}
}

img {
	height: 100%;
	object-fit: cover;
	object-position: center;
}