.agiletogether-logo-wall {
	--logo-width: 160px;
	--logo-height: 72px;
	--logo-gap: 48px;
	--fade-width: 80px;
	--marquee-duration: 30s;
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--fade-width),
		#000 calc(100% - var(--fade-width)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--fade-width),
		#000 calc(100% - var(--fade-width)),
		transparent 100%
	);
}

.agiletogether-logo-wall__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--logo-gap);
	min-width: max-content;
	animation: agiletogether-logo-wall-marquee var(--marquee-duration) linear infinite;
}

.agiletogether-logo-wall__item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--logo-width);
	min-width: var(--logo-width);
}

.agiletogether-logo-wall__link,
.agiletogether-logo-wall__image {
	display: block;
	width: 100%;
}

.agiletogether-logo-wall__image {
	height: var(--logo-height);
	object-fit: contain;
	object-position: center;
	transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.agiletogether-logo-wall__item:hover .agiletogether-logo-wall__image,
.agiletogether-logo-wall__item:focus-within .agiletogether-logo-wall__image {
	opacity: 1;
	filter: grayscale(0);
	transform: translateY(-2px);
}

.agiletogether-logo-wall.is-pause-on-hover:hover .agiletogether-logo-wall__track {
	animation-play-state: paused;
}

.agiletogether-logo-wall.is-static {
	-webkit-mask-image: none;
	mask-image: none;
}

.agiletogether-logo-wall.is-static .agiletogether-logo-wall__track {
	animation: none;
}

@keyframes agiletogether-logo-wall-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - var(--logo-gap)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.agiletogether-logo-wall__track {
		animation: none;
	}
}