.ampelem-iis {
	--ampelem-iis-gap: 24px;
	--ampelem-iis-duration: 25s;
	width: 100%;
}

.ampelem-iis__viewport {
	overflow: hidden;
	width: 100%;
}

.ampelem-iis__track {
	display: flex;
	align-items: center;
	width: max-content; /* expand to content width */
	gap: var(--ampelem-iis-gap);
	will-change: transform;
	transform: translate3d(0,0,0);
	animation-duration: var(--ampelem-iis-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* Two identical sets. Track moves by exactly 50% of its own content (one set). */
.ampelem-iis__set {
	display: inline-flex;
	align-items: center;
	gap: var(--ampelem-iis-gap);
}

.ampelem-iis__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.ampelem-iis__img {
	height: 90px;
	width: auto;
	max-width: none;
	display: block;
}

.ampelem-iis__link {
	display: inline-flex;
}

@keyframes ampelem-iis-left {
	from { transform: translate3d(0,0,0); }
	to   { transform: translate3d(-50%,0,0); }
}

@keyframes ampelem-iis-right {
	from { transform: translate3d(-50%,0,0); }
	to   { transform: translate3d(0,0,0); }
}

/* Direction */
.ampelem-iis[data-direction="left"] .ampelem-iis__track {
	animation-name: ampelem-iis-left;
}
.ampelem-iis[data-direction="right"] .ampelem-iis__track {
	animation-name: ampelem-iis-right;
}

/* Pause on hover */
.ampelem-iis[data-pause-on-hover="yes"]:hover .ampelem-iis__track {
	animation-play-state: paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ampelem-iis__track {
		animation: none !important;
		transform: none !important;
	}
	.ampelem-iis__viewport {
		overflow-x: auto;
	}
	.ampelem-iis__track {
		width: max-content;
	}
}