/**
 * Photo Marquee — edge-to-edge auto-scrolling photo carousel
 */

.module.photo-marquee {
	overflow: hidden;
}

.module.photo-marquee .photo-marquee-track {
	display: flex;
	gap: var(--text-spacing-xsmall);
	width: max-content;
}

.module.photo-marquee .photo-marquee-slide {
	flex-shrink: 0;
	height: 300px;
}

.module.photo-marquee .photo-marquee-slide img {
	border-radius: 8px;
	display: block;
	height: 100%;
	object-fit: cover;
	width: auto;
}

/* Animation — continuous scroll, suppressed entirely under reduced motion.
   Duration comes from the module, which times it per photo so the apparent
   speed stays constant as the number of photos changes. */

@media (prefers-reduced-motion: no-preference) {

	.module.photo-marquee .photo-marquee-track {
		animation: photo-marquee-scroll var(--photo-marquee-duration, 60s) linear infinite;
	}

}

@keyframes photo-marquee-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	.module.photo-marquee .photo-marquee-slide {
		height: 240px;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	.module.photo-marquee .photo-marquee-slide {
		height: 180px;
	}

}