.marquee {
	max-width: 1400px;
	overflow: hidden;

	@media only screen and (max-width: 767px) {
		/* Hiding this on mobile because I just can't get it to look right todo: might need to revisit this later */
		display: none;
	}
}

.marquee-track {
	display: grid;
	grid-template-columns: calc((120px + 25px) * 8) [track] 0px [resting];
	width: max-content;

	@media only screen and (max-width: 767px) {
		grid-template-columns: calc((30px + 15px) * 8) [track] 0px [resting];
	}

	@media only screen and (min-width: 768px) and (max-width: 1024px) {
		grid-template-columns: calc((60px + 20px) * 8) [track] 0px [resting];
	}
}

.marquee-item {
	grid-area: resting;
	animation: marquee-move 25s linear infinite forwards;
	width: 200px;
	aspect-ratio: 3/2;
	display: flex;
	justify-content: center;
	align-items: center;

	@media only screen and (max-width: 767px) {
		width: 100%;
	}

	@media only screen and (min-width: 768px) and (max-width: 1024px) {
		width: 100px;
	}
}

/* Individual delay overrides */
.item-position-1 {
	animation-delay: calc((25s / 6) * 1 * -1);
}
.item-position-2 {
	animation-delay: calc((25s / 6) * 2 * -1);
}
.item-position-3 {
	animation-delay: calc((25s / 6) * 3 * -1);
}
.item-position-4 {
	animation-delay: calc((25s / 6) * 4 * -1);
}
.item-position-5 {
	animation-delay: calc((25s / 6) * 5 * -1);
}
.item-position-6 {
	animation-delay: calc((25s / 6) * 6 * -1);
}

@keyframes marquee-move {
	to {
		transform: translateX(calc(-100cqw - 100%));
	}
}

.fadeout-horizontal {
	mask-image: linear-gradient(
		to right,
		transparent,
		#000 5rem,
		#000 calc(100% - 5rem),
		transparent
	);
}