:root {
      --logo-carousel-carousel-speed: 30s;
      --logo-carousel-logo-height: 80px;
      --logo-carousel-logo-gap: 64px;
      --logo-carousel-fade-width: 80px;
  }

  .carousel-wrap {
      position: relative;
      overflow: hidden;
      width: 100%;
  }

  .carousel-wrap::before,
  .carousel-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: var(--logo-carousel-fade-width);
      z-index: 2;
      pointer-events: none;
  }

  .carousel-wrap::before {
      left: 0;
      background: linear-gradient(to right, #fff, transparent);
  }

  .carousel-wrap::after {
      right: 0;
      background: linear-gradient(to left, #fff, transparent);
  }

  .carousel-track {
      display: flex;
      align-items: center;
      gap: var(--logo-carousel-logo-gap);
      width: max-content;
      animation: scroll-left var(--logo-carousel-carousel-speed) linear infinite;
  }

  .carousel-track:hover {
      animation-play-state: paused;
  }

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

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

  .carousel-track img {
      height: var(--logo-carousel-logo-height);
      width: auto;
      display: block;
      flex-shrink: 0;
      opacity: 0.6;
      filter: grayscale(1);
      transition: opacity 0.2s, filter 0.2s;
  }

  .carousel-track img:hover {
      opacity: 1;
      filter: grayscale(0);
  }