@charset "UTF-8";
.auto-carousel {
  width: 100%;
  height: var(--height-sm);
  overflow: hidden;
}
@media (min-width: 768px) {
  .auto-carousel {
    height: var(--height);
  }
}
.auto-carousel.auto-scroll--no-scroll {
  overflow: auto;
  height: unset !important;
}
.auto-carousel__list {
  display: flex;
  width: 100%;
  min-width: calc(var(--width-sm) * var(--quantity));
  position: relative;
  justify-content: center;
  gap: 1.5rem;
}
.auto-scroll--no-scroll .auto-carousel__list {
  flex-wrap: wrap;
  min-width: unset;
}
.auto-carousel__item {
  width: var(--width-sm);
  height: var(--height-sm);
  display: flex;
  align-items: center;
  /* DEFAULT (original behavior: animate under 992px) */
}
@media (max-width: 991px) {
  .auto-carousel__item {
    position: absolute;
    left: 100%;
    animation: slide var(--duration) linear infinite;
    animation-delay: calc(var(--duration) / var(--quantity) * (var(--position) - var(--quantity)));
  }
}
@media (min-width: 992px) {
  .auto-carousel__item {
    position: static;
    width: var(--width);
    height: var(--height);
  }
}
.auto-carousel__item a {
  display: contents;
}
.auto-carousel__item a img {
  transition: all 0.2s ease-in-out;
}
.auto-carousel__item a img:hover {
  transform: scale(1.05);
}
.auto-carousel__item .brand {
  max-width: 100%;
  margin: auto;
  height: auto;
  max-height: 78px;
}

/* ============================= */
/* DEVICE MODE OVERRIDES */
/* ============================= */
/* NO SCROLL (static everywhere) */
.auto-carousel.auto-scroll--no-scroll .auto-carousel__item {
  position: static !important;
  left: auto !important;
  animation: none !important;
}

/* MOBILE ONLY (<520px only) */
@media (min-width: 520px) and (max-width: 991px) {
  .auto-carousel.auto-scroll--mobile .auto-carousel__item {
    position: static;
    left: auto;
    animation: none;
  }
}

/* TABLET ONLY (<992px) */
/* Uses default animation under 992px — no extra override needed */
/* ALL DEVICES (animate on desktop too) */
@media (min-width: 992px) {
  .auto-carousel.auto-scroll--all .auto-carousel__item {
    position: absolute;
    left: 100%;
    animation: slide var(--duration) linear infinite;
    animation-delay: calc(var(--duration) / var(--quantity) * (var(--position) - var(--quantity)));
    width: var(--width);
    height: var(--height);
  }
}

@keyframes slide {
  from {
    left: 100%;
  }
  to {
    left: calc(var(--width) * -2);
  }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .auto-carousel__item {
    animation: none !important;
    position: static !important;
  }
}