.clients-carousel {
  --clients-visible: 4;
  --clients-gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: 5rem 0 4.5rem;
}

.clients-carousel__header {
  margin-bottom: 2.75rem;
  text-align: center;
}

.clients-carousel__stage {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
}

.clients-carousel__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.clients-carousel__control:hover {
  transform: translateY(-2px);
}

.clients-carousel__control[disabled] {
  cursor: default;
  opacity: 0.35;
  transform: none;
}

.clients-carousel__control img {
  width: 100%;
}

.clients-carousel__viewport {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--clients-visible) - 1) * var(--clients-gap)) / var(--clients-visible));
  gap: var(--clients-gap);
  min-height: 8rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: 0;
  scroll-behavior: smooth;
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.clients-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.clients-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: 0 1rem;
  background: transparent;
  box-shadow: none;
  scroll-snap-align: start;
}

.clients-carousel__item img {
  max-width: min(100%, 13rem);
  max-height: 4.75rem;
  width: auto;
  object-fit: contain;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.clients-carousel__item:hover img {
  opacity: 1;
  transform: scale(1.03);
}

@media (max-width: 1100px) {
  .clients-carousel {
    --clients-visible: 3;
    --clients-gap: 2.25rem;
  }
}

@media (max-width: 1200px) {
  .clients-carousel {
    --clients-visible: 2;
    --clients-gap: 1.5rem;
  }

  .clients-carousel__stage {
    grid-template-columns: 1fr;
  }

  .clients-carousel__control {
    display: none;
  }
}

@media (max-width: 820px) {
  .clients-carousel .container-shell {
    width: 100%;
  }

  .clients-carousel__header {
    padding-inline: 0.75rem;
  }

  .clients-carousel {
    --clients-visible: 1;
    --clients-gap: 0.85rem;
    --clients-mobile-card: 62%;
  }

  .clients-carousel__stage {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .clients-carousel__viewport {
    grid-auto-columns: var(--clients-mobile-card);
    padding-inline: 0;
    scroll-padding-inline: calc((100% - var(--clients-mobile-card)) / 2);
  }

  .clients-carousel__item {
    min-height: 6.75rem;
    padding: 0;
    scroll-snap-align: center;
    opacity: 0.28;
    transform: scale(0.84);
    transform-origin: center;
    transition:
      opacity 0.26s ease,
      transform 0.26s ease;
  }

  .clients-carousel__item.is-neighbor {
    opacity: 0.62;
    transform: scale(0.92);
  }

  .clients-carousel__item.is-prev {
    justify-content: flex-end;
  }

  .clients-carousel__item.is-next {
    justify-content: flex-start;
  }

  .clients-carousel__item.is-active {
    opacity: 1;
    transform: scale(1);
    justify-content: center;
  }

  .clients-carousel__item img {
    width: auto;
    max-width: 100%;
    max-height: 4.5rem;
    transition:
      transform 0.26s ease,
      opacity 0.26s ease;
  }

  .clients-carousel__item.is-prev img {
    transform: translateX(18%) scale(1.18);
    transform-origin: right center;
  }

  .clients-carousel__item.is-next img {
    transform: translateX(-18%) scale(1.18);
    transform-origin: left center;
  }

  .clients-carousel__item.is-active img {
    transform: scale(1.05);
  }
}

@media (max-width: 640px) {
  .clients-carousel {
    --clients-mobile-card: 58%;
  }

  .clients-carousel__stage {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .clients-carousel__item {
    padding: 0;
  }
}