:root {
  --carousel-speed: 45s;
  --carousel-gap: 4rem;
  --carousel-padding: 3.75rem;
  --logo-width: 9rem;
  --gradient-width: 15%;

  @media (max-width: 768px) {
    --carousel-padding: 2rem;
    --carousel-gap: 2rem;
    --logo-width: 6rem;
  }
}

* {
  box-sizing: border-box;
}

/*body {
  margin: 0;
  background: lightgray;
}*/

.carousel {
  position: relative;
  background-color: white;
  padding-block: var(--carousel-padding);
  display: flex;
  column-gap: var(--carousel-gap);
  overflow-x: hidden;
  box-shadow: 0 4px 10px rgb(0 0 0 / 15%);

  .logos {
    display: flex;
    column-gap: var(--carousel-gap);
    animation: scroll var(--carousel-speed) linear infinite;
    will-change: transform;

    img {
      width: var(--logo-width);
      object-fit: contain;
      transition: scale 0.3s;
      user-select: none;

      &:hover {
        scale: 1.10;
      }
    }
  }

  &:hover .logos {
    animation-play-state: paused;
  }

  &::after,
  &::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--gradient-width);
    z-index: 1;
    pointer-events: none;
  }

  &::before {
    left: 0;
    background-image: linear-gradient(to right, white, transparent);
  }

  &::after {
    right: 0;
    background-image: linear-gradient(to left, white, transparent);
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% - var(--carousel-gap)));
  }
}