/* Ux - Marquee --- */
.marquee-wrap {
  max-width: 100%;
  overflow: hidden;
}

.marquee-inner {
  width: max-content;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow: visible;
}

.marquee-inner .item {
  padding: 0 30px;
  animation: var(--duration) marquee infinite linear;
}

.marquee-inner:hover .item {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}


@media only screen and (max-width: 849px) {
  .marquee-inner .item {
    animation-duration: var(--duration-md, var(--duration));
  }
}

@media only screen and (max-width: 549px) {
  .marquee-inner .item {
    animation-duration: var(--duration-sm, var(--duration-md, var(--duration)));
  }
}