.background-slider-track {
	display: flex;
	width: 300%;
	height: 100%;
	animation: slide-background 18s infinite cubic-bezier(0.77, 0, 0.175, 1);
}

.background-slider-track img {
	width: 33.333%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.5);
}

@keyframes slide-background {
	0%,
	28% {
		transform: translateX(0%);
	}
	33%,
	61% {
		transform: translateX(-33.333%);
	}
	66%,
	100% {
		transform: translateX(-66.666%);
	}
}

.client-slider {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		black 15%,
		black 85%,
		transparent
	);
	mask-image: linear-gradient(
		to right,
		transparent,
		black 15%,
		black 85%,
		transparent
	);
}

.client-slider-track {
	display: flex;
	width: max-content;
	animation: 40s linear infinite;
}

.slide-ltr {
	animation-name: slide-ltr;
}
.slide-rtl {
	animation-name: slide-rtl;
}

.client-logo {
	width: 6rem;
	height: 6rem;
	flex-shrink: 0;
}

@keyframes slide-ltr {
	from {
		transform: translateX(3%);
	}
	to {
		transform: translateX(-68%);
	}
}

@keyframes slide-rtl {
	from {
		transform: translateX(-83%);
	}
	to {
		transform: translateX(2%);
	}
}