.mdl-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: var(--mdl-height);
}

.mdl-container::before,
.mdl-container::after {
	content: '';
	position: absolute;
	top: 0;
	width: 50px;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.mdl-container::before {
	left: 0;
	background: linear-gradient(to right, white 0%, transparent 100%);
}

.mdl-container::after {
	right: 0;
	background: linear-gradient(to left, white 0%, transparent 100%);
}
.mdl-marquee-track {
	display: flex;
	width: max-content;
	gap: var(--gap, 20px);
	height: 100%;
	animation: scroll-left var(--mdl-animation-duration, 30s) linear infinite;
	will-change: transform;
}

.mdl-marquee-inner {
	display: flex;
	gap: var(--gap, 20px);
	height: 100%;
}

.mdl-container[data-direction="right"] .mdl-marquee-track {
	animation-name: scroll-right;
}

.mdl-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.mdl-logo img {
	max-height: 100%;
	object-fit: contain;
	display: block;
}

@keyframes scroll-left {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes scroll-right {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}