.marquee-wrapper {
	overflow: hidden;
	width: 100%;
	display: flex;
}

.marquee-content {
	display: flex;
	flex-shrink: 0;
	min-width: 100%;
	gap: 20px;
}

.marquee-item {
	flex: 0 0 auto;
	box-sizing: border-box;
}

.marquee-item img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.marquee-dir-left {
	animation: scrollLeft_ef51ba3e 20s linear infinite;
}

.marquee-dir-right {
	animation: scrollRight_ef51ba3e 20s linear infinite;
	transform: translateX(-50%); 
}

@keyframes scrollLeft_ef51ba3e {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-50% - (var(--gap, 20px) / 2)));
	}
}

@keyframes scrollRight_ef51ba3e {
	0% {
		transform: translateX(calc(-50% - (var(--gap, 20px) / 2)));
	}
	100% {
		transform: translateX(0);
	}
}

.marquee-wrapper.marquee-pause-hover:hover .marquee-content {
	animation-play-state: paused;
}

.marquee-content {
	--gap: 20px;
}