.scroller {
	-webkit-mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
	        mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
}

.scroller__inner {
    width: max-content;
    gap: clamp(2rem, 5vw, 5rem);
}

.scroller__inner li {
	flex-shrink: 0;
	white-space: nowrap;
	color: #fff;
	opacity: 0.85;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: clamp(0.9rem, 2vw, 1.5rem);
}

/* if you switch to <img> logos instead of text */
.scroller__inner img {
	width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.8;
}

.scroller[data-animated="true"] .scroller__inner {
	animation: scroll var(--_scroll-duration, 40s) linear infinite;
}

.scroller[data-animated="true"][data-speed="fast"] {
	--_scroll-duration: 20s;
}

.scroller[data-animated="true"][data-speed="slow"] {
	--_scroll-duration: 60s;
}

.scroller:hover .scroller__inner {
	animation-play-state: paused;
}

@keyframes scroll {
	to {
		transform: translateX(-50%);
	}
}