.so-ew-image-marquee {
	--so-ew-marquee-fade: 100px;
	--so-ew-marquee-fade-color: #fff;
	--so-ew-marquee-duration: 35s;
	--so-ew-marquee-gap: 72px;
	position: relative;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
}

.so-ew-image-marquee__viewport { overflow: hidden; width: 100%; }
.so-ew-image-marquee__track { display: flex; width: max-content; gap: var(--so-ew-marquee-gap); will-change: transform; animation: so-ew-image-marquee-scroll var(--so-ew-marquee-duration) linear infinite; }
.so-ew-image-marquee__group { display: flex; align-items: center; flex: 0 0 auto; gap: var(--so-ew-marquee-gap); }
.so-ew-image-marquee__item { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 180px; height: 120px; overflow: hidden; }
.so-ew-image-marquee__image { display: block; width: 100% !important; height: 100% !important; object-fit: contain; flex: 0 0 auto; }
.so-ew-image-marquee__image { transition: filter 0.4s ease; }
.so-ew-image-marquee--cover .so-ew-image-marquee__image { object-fit: cover !important; }
.so-ew-image-marquee--single-item .so-ew-image-marquee__track,
.so-ew-image-marquee--single-item .so-ew-image-marquee__group { width: 100%; }

.so-ew-image-marquee--grayscale .so-ew-image-marquee__image { filter: grayscale(100%); }
.so-ew-image-marquee--grayscale.so-ew-image-marquee--color-hover .so-ew-image-marquee__item:hover .so-ew-image-marquee__image { filter: grayscale(0); }

.so-ew-image-marquee::before,
.so-ew-image-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: var(--so-ew-marquee-fade); z-index: 2; pointer-events: none; }
.so-ew-image-marquee::before { left: 0; background: linear-gradient(90deg, var(--so-ew-marquee-fade-color) 0%, transparent 100%); }
.so-ew-image-marquee::after { right: 0; background: linear-gradient(270deg, var(--so-ew-marquee-fade-color) 0%, transparent 100%); }
.so-ew-image-marquee--pause-hover:hover .so-ew-image-marquee__track { animation-play-state: paused; }
.so-ew-image-marquee--reverse .so-ew-image-marquee__track { animation-direction: reverse; }

@keyframes so-ew-image-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-50% - (var(--so-ew-marquee-gap) / 2)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.so-ew-image-marquee__track { animation: none; }
}