@keyframes rdm-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-50% - 1rem));
}
}
.clients-carousel {
mask-image: linear-gradient(
to right,
transparent,
black 80px,
black calc(100% - 80px),
transparent
);
-webkit-mask-image: linear-gradient(
to right,
transparent,
black 80px,
black calc(100% - 80px),
transparent
);
}
.clients-track {
animation: rdm-scroll 30s linear infinite;
width: fit-content;
}
.clients-track:hover {
animation-play-state: paused;
}
@media (max-width: 768px) {
.clients-carousel {
mask-image: linear-gradient(
to right,
transparent,
black 40px,
black calc(100% - 40px),
transparent
);
-webkit-mask-image: linear-gradient(
to right,
transparent,
black 40px,
black calc(100% - 40px),
transparent
);
}
}