.et-marquee-wrapper {
  .et-marquee-items-wrapper {
    --et-marquee-gap: 50px;
    @include media-breakpoint-up(lg) {
      --et-marquee-gap: 100px;
    }
    position: relative;
    display: flex;
    overflow: hidden;
    gap: var(--et-marquee-gap);
  }

  .et-marquee-items {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: var(--et-marquee-gap);
    min-width: 100%;
  }

  &.et-animation-rtl,
  &.et-animation-ltr {
    .et-marquee-items {
      animation: et-marquee 10s linear infinite;
      @include media-breakpoint-up(lg) {
        animation: et-marquee 20s linear infinite;
      }
    }
  }

  &.et-animation-switch {
    .et-marquee-items {
      animation: et-marquee-switch 20s linear infinite;
      @include media-breakpoint-up(lg) {
        animation: et-marquee-switch 40s linear infinite;
      }
    }
  }

  &.et-animation-ltr .et-marquee-items {
    animation-direction: reverse;
  }

  /* Pause animation when hovering or reduced-motion is set */
  &.et-pause-on-hover:hover .et-marquee-items {
    animation-play-state: paused;
  }
  @media (prefers-reduced-motion: reduce) {
    .et-marquee-items {
      animation-play-state: paused !important;
    }
  }
}

@keyframes et-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--et-marquee-gap)));
  }
}

@keyframes et-marquee-switch {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(-100% - var(--et-marquee-gap)));
  }
  100% {
    transform: translateX(0);
  }
}