.LogoCarousel {

  
     --logo-gap: 20px;       /* Space between logos */
  --logo-size: 180px;        /* Size of each logo */
  --animation-duration: 30s;  /* Speed: lower = faster */
  --animation-direction: normal; /* normal (left) | reverse (right) */ 
   --carousel-width: calc(
    (var(--logo-size) + var(--logo-gap)) * var(--logo-count) - var(--logo-gap)
  );
  margin: 0 auto;
  padding: 20px 0;
  width: 80%;
max-width: var(--carousel-width);
  overflow: hidden;
  display: flex;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 5%,
    rgba(0, 0, 0, 1) 95%,
    rgba(0, 0, 0, 0) 100%
  );
}





.LogoCarousel > * {
  flex: 0 0 100%;
}

/* Group the cards for better structure. */
.LogoCarousel__group {
  display: flex;
  gap: var(--logo-gap);
  /* Add padding to the right to create a gap between the last and first card. */
 padding-right: var(--logo-gap);
  will-change: transform;
  /* We should be nice to the browser - let it know what we're going to animate. */
  animation: LogoCarousel-scroll var(--animation-duration) linear infinite;
  animation-direction: var(--animation-direction);
}

.LogoCarousel__item {
  width: 100%;
  color: white;
  border-radius: 24px;
  box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
  padding: 20px;
  font-size: xx-large;
  justify-content: center;
  align-items: center;
 width: var(--logo-size);
  height: var(--logo-size);
  object-fit: contain;
  cursor: pointer;
    filter: grayscale(100%);
}

.LogoCarousel__item:hover {
   filter: grayscale(0%);
}

.LogoCarousel:hover .LogoCarousel__group {
  animation-play-state: paused;
}


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