.ty-marquee {
  overflow: hidden;
  width: 0;
  min-width: 100%;
}
.ty-marquee_fade {
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
          mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.ty-marquee__track {
  display: flex;
  gap: var(--ty-marquee-gap, 16px);
  width: -moz-max-content;
  width: max-content;
  animation: ty-marquee-left var(--ty-marquee-duration, 50s) linear infinite;
}
.ty-marquee__track_reverse {
  animation-name: ty-marquee-right;
}
.ty-marquee__track_pause-on-hover:hover {
  animation-play-state: paused;
}
.ty-marquee__track_once {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-name: ty-marquee-once-left;
}
.ty-marquee__track_once.ty-marquee__track_reverse {
  animation-name: ty-marquee-once-right;
}

@keyframes ty-marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes ty-marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes ty-marquee-once-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes ty-marquee-once-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}