:root{
	--logo-width: 180px;
	--logo-gap: 2em;
	--scroll-duration: 70s;
	--logos-visible: 5;
}

/* Responsive */
@media (max-width:1920px){
	:root{ --logos-visible: 3; }
}

@media (max-width:1024px){
	:root{ --logos-visible: 2; }
}
@media (max-width:600px){
	:root{ --logos-visible: 1; }
}

/* Wrapper */
.clients-carousel{
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Mask */
.carousel-mask{
	overflow: hidden;
	width: calc(var(--logos-visible) * var(--logo-width));
}

/* Moving band */
.carousel-track{
	display: flex;
	width: max-content;
	animation: scroll var(--scroll-duration) linear infinite;
}

/* Pause on hover */
.carousel-mask:hover .carousel-track{
	animation-play-state: paused;
}

/* Lists */
.carousel-list{
	display: flex;
	gap: var(--logo-gap);
	list-style: none;
	padding: 0;
	margin: 0 3em 0 0;
}

/* Items */
.carousel-list li{
	flex: 0 0 auto;
	width: var(--logo-width);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Logos */
.carousel-list img{
	max-height: 7em;
	filter: grayscale(100%);
	transition: filter 200ms ease-in-out;
}

/* Hover = Farbe */
.carousel-list li:hover img{
	filter: grayscale(0%);
}

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

.carousel-mask::after{
	content:"";
	position:absolute;
	left:50%;
	top:0;
	transform:translateX(-50%);
	width:0.1px;
	height:100%;
	background:rgba(255,255,255,.05);
}