.magic-logo-carousel {
  --magic-logo-gap: clamp(28px, 3.4vw, 56px);
  --magic-logo-height: clamp(16px, 2vw, 28px);
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

.magic-logo-carousel__rail {
  display: flex;
  width: max-content;
  align-items: center;
  animation: magic-logo-carousel-scroll 36s linear infinite;
  will-change: transform;
}

.magic-logo-carousel__set {
  display: flex;
  align-items: center;
  gap: var(--magic-logo-gap);
  padding-right: var(--magic-logo-gap);
}

.magic-logo-carousel__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.magic-logo-carousel__img {
  display: block;
  width: auto;
  height: var(--magic-logo-height);
  max-width: 170px;
  object-fit: contain;
  opacity: 0.95;
}

.magic-logo-carousel:hover .magic-logo-carousel__rail {
  animation-play-state: paused;
}

.magic-logo-carousel--white .magic-logo-carousel__img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.magic-logo-carousel--home {
  margin-top: 6px;
}

@keyframes magic-logo-carousel-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 849px) {
  .magic-logo-carousel {
    --magic-logo-gap: 24px;
    --magic-logo-height: 18px;
  }
}