.amcc-film-strip {
	--amcc-film-bg: #fff;
	--amcc-film-height: 160px;
	--amcc-film-speed: 18s;
	--amcc-film-gap: 0px;
	align-items: stretch;
	background: var(--amcc-film-bg);
	display: flex;
	height: var(--amcc-film-height);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.amcc-film-strip.amcc-film-fade {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.amcc-film-track {
	align-items: center;
	animation: amcc-film-marquee var(--amcc-film-speed) linear infinite;
	display: flex;
	flex: 0 0 auto;
	gap: var(--amcc-film-gap);
	height: 100%;
	min-width: max-content;
	will-change: transform;
}

.amcc-film-direction-right .amcc-film-track {
	animation-direction: reverse;
}

.amcc-film-pause-hover:hover .amcc-film-track {
	animation-play-state: paused;
}

.amcc-film-image {
	display: block;
	flex: 0 0 auto;
	height: 100%;
	max-width: none;
	object-fit: contain;
	width: auto;
}

@keyframes amcc-film-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-100%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.amcc-film-track {
		animation-duration: 1ms;
		animation-iteration-count: 1;
	}
}