.imq-marquee {
	--imq-duration: 30s;
	--imq-gap: 40px;
	--imq-height: 80px;

	overflow: hidden;
	width: 100%;
	position: relative;
}

.imq-marquee .imq-track {
	/* Exact pixel width is set by frontend.js once it runs (see the
	   comment in sizeMarquee()); this 200% is just the no-JS fallback. */
	display: flex;
	width: 200%;
	will-change: transform;
	animation: imq-scroll-left var(--imq-duration) linear infinite;
}

.imq-marquee.imq-direction-right .imq-track {
	animation-name: imq-scroll-right;
}

.imq-marquee.imq-pause-hover:hover .imq-track {
	animation-play-state: paused;
}

.imq-marquee .imq-group {
	/* Exact pixel width is set by frontend.js once it runs; this 50% is
	   just the no-JS fallback (matches .imq-track's 200% above). */
	flex: 0 0 50%;
	display: flex;
	align-items: center;
	gap: var( --imq-gap );
	margin-right: var( --imq-gap );
}

.imq-marquee .imq-item {
	/* Exact pixel width is set by frontend.js (based on the marquee's
	   rendered width and the "images shown at once" setting) — this is
	   just a reasonable fallback if JavaScript is unavailable. */
	flex: 0 0 200px;
	min-width: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.imq-marquee .imq-item-link {
	display: block;
	width: 100%;
	line-height: 0;
}

.imq-marquee .imq-item img {
	display: block;
	width: 100%;
	height: var( --imq-height );
	max-width: 100%;
	object-fit: contain;
}

.imq-marquee.imq-grayscale .imq-item img {
	filter: grayscale( 100% );
	opacity: 0.75;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.imq-marquee.imq-grayscale .imq-item:hover img {
	filter: grayscale( 0% );
	opacity: 1;
}

@keyframes imq-scroll-left {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( -50% );
	}
}

@keyframes imq-scroll-right {
	from {
		transform: translateX( -50% );
	}
	to {
		transform: translateX( 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.imq-marquee .imq-track {
		animation: none;
	}
}