:root {
  --animation-factor: -150%;
}

.clients {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
}

.clients div {
  max-width: 1200px;
  display: flex;
  overflow-x: hidden;
  gap: 12.5%;
}

.clients img {
  max-width: 300px;
  width: 25%;
  animation: 12s infinite scroll;
}

@keyframes scroll {

  0%,
  8.3% {
    transform: translateX(0);
  }

  16.6%,
  24.9% {
    transform: translateX(calc(1 * var(--animation-factor)));
  }

  33.2%,
  41.5% {
    transform: translateX(calc(2 * var(--animation-factor)));
  }

  49.8%,
  58.1% {
    transform: translateX(calc(3 * var(--animation-factor)));
  }

  66.4%,
  74.7% {
    transform: translateX(calc(4 * var(--animation-factor)));
  }

  83%,
  91.3% {
    transform: translateX(calc(5 * var(--animation-factor)));
  }

  100% {
    transform: translateX(calc(6 * var(--animation-factor)));
  }


}

@media (max-width: 500px) {

  :root {
    --animation-factor: -100%;
  }

  .clients div {
    max-width: 300px;
    gap: 0%;
  }

  .clients img {
    width: 100%;
    animation: 8s infinite scroll;
  }

}