/* ============================================
   Partner Carousel (Marquee)
   ============================================ */

   :root {
    --carousel-logo-size: 200px;
    --carousel-gap: 20px;
  }
  
  .carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .carousel__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: 96px;
    pointer-events: none;
  }
  
  .carousel__fade--left {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
  }
  
  .carousel__fade--right {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
  }
  
  .carousel__track {
    display: flex;
    align-items: center;
    gap: var(--carousel-gap);
    width: max-content;
    padding-block: 8px;
    animation: marquee 55s linear infinite;
    will-change: transform;
  }

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
  
    to {
      transform: translateX(var(--marquee-dist, -50%));
    }
  }
  
  .carousel__item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(var(--carousel-logo-size) * 1.55);
    height: var(--carousel-logo-size);
  }

  .carousel__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.75;
    filter: grayscale(30%);
  }

  .carousel__logo[src*="enterprise-ireland"] {
    max-width: 88%;
    max-height: 72%;
  }

  .carousel__item:hover .carousel__logo,
  .carousel__item:focus-within .carousel__logo {
    transform: none;
  }

  @media (max-width: 767px) {
    :root {
      --carousel-logo-size: 140px;
      --carousel-gap: 14px;
    }
  
    .carousel__fade {
      width: 48px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .carousel__track {
      animation: none;
      transform: none;
      will-change: auto;
    }
  
    .carousel__logo {
      transition: none;
    }
  
    .carousel__item:hover .carousel__logo,
    .carousel__item:focus-within .carousel__logo {
      transform: none;
    }
  }