:root {
	--size: clamp(10rem, 1rem + 40vmin, 30rem);
	--gap: calc(var(--size) / 14);
	--duration: 60s;
	--scroll-start: 0;
	--scroll-end: calc(-100% - var(--gap));
}

.logos-wrapper {
	display: grid;
	align-content: center;
	overflow: hidden;
	gap: var(--gap);
	width: 100%;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-text);
}

.marquee {
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	mask-image: linear-gradient(
		var(--mask-direction, to right),
		hsl(0 0% 0% / 0),
		hsl(0 0% 0% / 1) 20%,
		hsl(0 0% 0% / 1) 80%,
		hsl(0 0% 0% / 0)
	);
}

.marquee__group {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll-x var(--duration) linear infinite;
}
.marquee:hover > .marquee__group {
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	-o-animation-play-state:paused;
	animation-play-state:paused;
	cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
	.marquee__group {
		animation-play-state: paused;
	}
}

.marquee--reverse .marquee__group {
	animation-direction: reverse;
	animation-delay: -30s;
}

@keyframes scroll-x {
	from {
		transform: translateX(var(--scroll-start));
	}
	to {
		transform: translateX(var(--scroll-end));
	}
}

@keyframes scroll-y {
	from {
		transform: translateY(var(--scroll-start));
	}
	to {
		transform: translateY(var(--scroll-end));
	}
}

/* Element styles */
.marquee .logo-wrapper a {
	width: 225px;
	padding: 38px;
	background-color: #fff;
	display: flex;
	height: 128px;
}

/* Parent wrapper */
.logos-wrapper .wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin: auto;
	max-width: 100vw;
}

@keyframes fade {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

a.logo-link > img {
    max-height: 52px;
    width: auto;
	margin: auto;
}