.marquee-container {
	overflow: hidden;
	position: relative;
	width: 100%;

	&::after {
		content: '';
		background: linear-gradient(to right, #fff, transparent 10%, transparent 90%, #fff);
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		pointer-events: none;
	}
}

.marquee-wrapper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	overflow: hidden;
	position: relative;
	width: fit-content !important;
	max-width: none;

	/* &:hover .marquee {
	animation-play-state: paused;
} */
}

.marquee {
	--duration: 200s;
	--delay: -100s;
	display: flex;
	animation: marquee var(--duration) linear infinite;
	gap: 40px;
	padding-inline: 10px;
	width: max-content;
}

.marquee-second {
	position: absolute;
	top: 0;
	left: 100%;
	display: flex;
	animation: marquee2 var(--duration) linear infinite;
	animation-delay: var(--delay);
}

.logo {
	flex: 0 0 auto;
	padding: 0;
}

.logo img {
	height: auto;
	width: 120px;
	object-fit: contain;
}

@keyframes marquee {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(-100%);
	}
}

@keyframes marquee2 {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-200%);
	}
}