.logo-carousel { position: relative; }
.logo-carousel__fade {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  z-index: 2;
}
.logo-carousel__fade--left {
  left: 0;
  background: linear-gradient(to right, #101418 15%, transparent);
}
.logo-carousel__fade--right {
  right: 0;
  background: linear-gradient(to left, #101418 15%, transparent);
}
.logo-carousel__viewport {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.logo-carousel__viewport:active,
.logo-carousel__track.is-dragging {
  cursor: grabbing;
}
.logo-carousel__track {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  will-change: transform;
}
.logo-carousel__track--static {
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.logo-carousel__slide {
  flex: 0 0 auto;
  width: 9.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  background: #181c20;
  border: 1px solid rgba(59, 73, 75, 0.45);
}
.logo-carousel__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.25s, opacity 0.25s;
}
.logo-carousel__slide:hover .logo-carousel__image {
  filter: grayscale(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .logo-carousel__image {
    filter: grayscale(0);
    opacity: 1;
    transition: none;
  }
}