.ws-partners-slider {
  --ws-partners-bg: #fafaf7;
  --ws-partners-text: #1a1a1a;
  --ws-partners-muted: #6b6b6b;
  --ws-partners-accent: #c9b88a;

  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: transparent;
}

.ws-partners-slider,
.ws-partners-slider * {
  box-sizing: border-box;
}

.ws-partners-slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
}

.ws-partners-slider__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ws-partners-slider-scroll 40s linear infinite;
  will-change: transform;
}

.ws-partners-slider:hover .ws-partners-slider__track {
  animation-play-state: paused;
}

.ws-partners-slider__item {
  flex: 0 0 auto;
  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 1.5rem;
  opacity: 0.6;
  filter: grayscale(100%);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    filter 0.4s ease;
}

.ws-partners-slider__item:hover {
  opacity: 1;
  transform: translateY(-2px);
  filter: grayscale(0%);
}

.ws-partners-slider__item img {
  max-width: 180px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@keyframes ws-partners-slider-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .ws-partners-slider__viewport {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    );

    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    );
  }

  .ws-partners-slider__item {
    width: 160px;
    height: 86px;
    margin: 0 1rem;
  }

  .ws-partners-slider__item img {
    max-width: 145px;
    max-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-partners-slider__track {
    animation-duration: 120s;
  }
}