.smaak-marquee {
	--smaak-marquee-duration: 40s;
	--smaak-marquee-gap: 28px;
	display: flex;
	position: relative;
	overflow: hidden;
	max-width: 100%;
}

.smaak-marquee__track {
	display: flex;
	flex: none;
	width: var(--smaak-marquee-track-w, max-content);
	animation: var(--smaak-marquee-anim, smaak-marquee) var(--smaak-marquee-duration) linear infinite;
	animation-direction: var(--smaak-marquee-direction, normal);
}

.smaak-marquee__group {
	display: flex;
	flex: none;
	align-items: center;
	flex-wrap: var(--smaak-marquee-wrap, nowrap);
	justify-content: var(--smaak-marquee-justify, flex-start);
	gap: var(--smaak-marquee-gap);
	width: var(--smaak-marquee-group-w, auto);
	padding-inline-end: var(--smaak-marquee-group-pad, var(--smaak-marquee-gap));
}

.smaak-marquee__group[aria-hidden="true"] {
	display: var(--smaak-marquee-clones, flex);
}

.smaak-marquee__group > .smaak-marquee__sep:last-child {
	display: var(--smaak-marquee-last-sep, inline-flex);
}

.smaak-marquee__item,
.smaak-marquee__sep {
	display: inline-flex;
	flex: none;
	align-items: center;
	white-space: nowrap;
}

a.smaak-marquee__item {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease, opacity 0.25s ease;
}

.smaak-marquee__item img {
	display: block;
	width: auto;
	height: var(--smaak-marquee-img-h, auto);
	max-width: var(--smaak-marquee-img-max-w, none);
	object-fit: contain;
	transition: opacity 0.3s ease, filter 0.3s ease;
}

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

/* Le fondu n'est appliqué qu'en mode défilant (--smaak-marquee-fade-on vaut 0 en mode statique). */
.smaak-marquee--fade-yes .smaak-marquee {
	--smaak-marquee-fade-size: calc(var(--smaak-marquee-fade, 64px) * var(--smaak-marquee-fade-on, 1));
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--smaak-marquee-fade-size), #000 calc(100% - var(--smaak-marquee-fade-size)), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--smaak-marquee-fade-size), #000 calc(100% - var(--smaak-marquee-fade-size)), transparent);
}

@keyframes smaak-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-100% / var(--smaak-marquee-copies, 3)), 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.smaak-marquee__track {
		animation-play-state: paused;
	}
}