.marquee {
  display: block;
  overflow: hidden;
  padding-block: var(--block-space-top, 0px) var(--block-space-bottom, 0px);
}

@media (max-width: 767px) {
  .marquee {
    padding-block: var(--block-space-top-mobile, 0px) var(--block-space-bottom-mobile, 0px);
  }
}

.marquee-track {
  width: max-content;
  flex-wrap: nowrap;
}

.marquee.state--ready .marquee-track {
  animation: marquee-scroll var(--duration, 20s) linear infinite;
}

.marquee-logo {
  flex: 0 0 auto;
  height: var(--logo-height, var(--marquee-logo-height, 34px));
}

@media (max-width: 767px) {
  .marquee-logo {
    height: var(--logo-height-mobile, var(--marquee-logo-height-mobile, var(--logo-height, var(--marquee-logo-height, 34px))));
  }
}

.marquee-logo img {
  display: block;
  width: auto;
  height: 100%;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(var(--shift, 0px) * -1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee.state--ready .marquee-track {
    animation: none;
  }
}
