/**
 * Infinite Marquee Logo Scroller CSS
 */

.marquee-container {
	width: 100%;
	overflow: hidden;
	margin: 2rem 0;
}

.marquee {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
	animation-duration: 30s;
	/* Default, can be overridden with data-speed */
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.marquee-rtl {
	animation-name: scroll-rtl;
}

.marquee-ltr {
	animation-name: scroll-ltr;
}

.marquee-logo {
	max-width: 24em;
	max-height: 7.2em;
	margin-right: 8em;
	display: flex;
	align-self: center;
}

.marquee-logo img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

@keyframes scroll-rtl {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@keyframes scroll-ltr {
	from {
		transform: translateX(-50%);
	}

	to {
		transform: translateX(0);
	}
}