.wsi-marquee {
	overflow: hidden;
	padding: 0 20px 50px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.wsi-marquee__track {
	display: flex;
	gap: 60px;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: .5;
	animation: wsi-marquee var(--wsi-marquee-duration, 300s) linear infinite;
}
.wsi-marquee__track li {
	flex-shrink: 0;
	width: 150px;
	height: 150px;
}
.wsi-marquee__track img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: invert(1);
}
/* Left to right. Gap included so both halves are the same width. */
@keyframes wsi-marquee {
	from { transform: translateX(calc(-50% - 30px)); }
	to   { transform: translateX(0); }
}
@media (max-width: 767px) {
	.wsi-marquee__track { gap: 40px; }
	.wsi-marquee__track li { width: 100px; height: 100px; }
	@keyframes wsi-marquee {
		from { transform: translateX(calc(-50% - 20px)); }
		to   { transform: translateX(0); }
	}
}
@media (prefers-reduced-motion: reduce) {
	.wsi-marquee__track { animation: none; }
}