.marquee {
	@apply relative w-full left-1/2 right-1/2 ml-[-50vw] mr-[-50vw];
	--Marquee-gap: 24px;
}

.marquee .marquee__container {
	--Marquee-shadow-size: 16px;
	--Marquee-duration: 6s;

	@apply relative overflow-hidden flex gap-6 select-none max-w-full;
	mask-image: linear-gradient(
		to right,
		var(--mask-off) 0,
		var(--mask-ease) calc(var(--Marquee-shadow-size) / 2),
		var(--mask-on) var(--Marquee-shadow-size),
		var(--mask-on) calc(100% - var(--Marquee-shadow-size)),
		var(--mask-ease) calc(100% - calc(var(--Marquee-shadow-size) / 2)),
		var(--mask-off) 100%
	);
}

.marquee .marquee__container .marquee__inner__container {
	@apply flex flex-shrink-0 max-w-full gap-[var(--Marquee-gap)];
	animation: Marquee_scroll var(--Marquee-duration) linear infinite;
}

/* .marquee .marquee__container .marquee__inner__container:nth-child(2) {
	@apply absolute top-0 left-0 flex flex-shrink-0 max-w-full gap-[var(--Marquee-gap)];
	animation: Marquee_scroll_abs var(--Marquee-duration) linear infinite;
} */
.marquee .marquee__container .marquee__inner__container svg {
	@apply flex-shrink-0 fill-[var(--color-text-primary)] max-w-[120px];
}

@keyframes Marquee_scroll {
	0% {
		transform: translate3d(0%, 0, 0);
	}
	100% {
		transform: translate3d(-100%, 0, 0);
	}
}
@keyframes Marquee_scroll_abs {
	0% {
		transform: translateX(calc(100% + var(--Marquee-gap)));
	}
	100% {
		transform: translateX(0);
	}
}
