.marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
	width: max-content;
	animation: evermark-marquee 30s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
	animation-play-state: paused;
}

@keyframes evermark-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}
	.marquee {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
}