/* CSS for the gallery */
.carousel {
	--items: 14;
	--carousel-duration: 45s;
	@media (width > 600px) {
		--carousel-duration: 30s;
	}
	--carousel-width: min(98vw, 1600px); 
	/* note - it will "break" if it gets too wide and there aren't enough items */
	--carousel-item-width: 28rem;
	--carousel-item-height: 500px;
	--carousel-item-gap: 1rem;

	--clr-cta: rgb(0, 132, 209);

	position: relative;
	width: var(--carousel-width);
	height: var(--carousel-item-height);
	overflow: clip;

	&[mask] {
		/* fade out on sides */
		mask-image: linear-gradient(
			to right,
			transparent,
			black 10% 90%,
			transparent
		);
	}

	/* scroll right to left */
	/* Articles should be entered in reverse order */
	&[reverse] > article {
		animation-direction: reverse;
	}
	/* hover pauses animation */
	&:hover > article {
		animation-play-state: paused;
	}
}
.carousel > article {
	position: absolute;
	top: 0;
	left: calc(100% + var(--carousel-item-gap));
	width: var(--carousel-item-width);
	height: var(--carousel-item-height);
	display: grid;
	grid-template-rows: 250px auto 1fr auto; /* No taller than --carsousel-item-height */
	gap: 0.25rem;

	padding-block-end: 1rem;
	border: 1px solid black;
	border-radius: 10px;

	background: white;
	color: light-dark(rgb(49, 65, 88), white);

	/* animation */
	will-change: transform;
	animation-name: marquee;
	animation-duration: var(--carousel-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: calc(
		var(--carousel-duration) / var(--items) * 1 * var(--i) * -1
	);
	&:nth-child(1) {
		--i: 0;
	}
	&:nth-child(2) {
		--i: 1;
	}
	&:nth-child(3) {
		--i: 2;
	}
	&:nth-child(4) {
		--i: 3;
	}
	&:nth-child(5) {
		--i: 4;
	}
	&:nth-child(6) {
		--i: 5;
	}
	&:nth-child(7) {
		--i: 6;
	}
	&:nth-child(8) {
		--i: 7;
	}
	&:nth-child(9) {
		--i: 8;
	}
	&:nth-child(10) {
		--i: 9;
	}
	&:nth-child(11) {
		--i: 10;
	}
	&:nth-child(12) {
		--i: 11;
	}
	&:nth-child(13) {
		--i: 12;
	}
	&:nth-child(14) {
		--i: 13;
	}
	&:nth-child(15) {
		--i: 14;
	}
	&:nth-child(16) {
		--i: 15;
	}
}
.carousel img {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	border-radius: 10px 10px 0 0;
	/* "pop out" and enlarge the image on hover or touch */
	transition: transform 0.5s;
	&:hover {transform:scale(2.2);}
}
.carousel > article > *:not(img) {
	padding: 0 1rem;
}
.carousel > article > div {
	display: grid;
	grid-row: 2 / span 2;
	grid-template-rows: subgrid;
	font-size: 1rem;
}
.carousel > article h2 {
	font-size: 1.2rem;
	font-weight: 300;
	padding-block: 0.75rem 0.25rem;
	margin: 0;
}
.carousel > article p {
	margin: 0;
}
.carousel > article a {
	text-decoration: underline;
	text-transform: none;
	color: light-dark(var(--clr-cta), blue);
	padding: 0 0.5rem;
	place-self: start;
	transition: 150ms ease-in-out;
	&:hover,
	&:focus-visible {
		background-color: var(--clr-cta);
		color: white;
		outline: none;
	}
}

@keyframes marquee {
	100% {
		transform: translateX(
			calc(
				(var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) *
					-1
			)
		);
	}
}