.images-marquee {
  --animation-speed: 50s;
  
  .container {
    position: relative;
    overflow: hidden;

    &:before,
    &:after {
      content: "";
      position: absolute;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 15rem;
      height: 100%;
      background-image: linear-gradient(to right, rgba(255, 255, 255, 1), transparent);
    }
    &:after {
      left: auto;
      right: 0;
      background-image: linear-gradient(to left, rgba(255, 255, 255, 1), transparent);
    }
  }

  .marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;

    &.hover-pause:hover .marquee-content {
      animation-play-state: paused;
    }
  }

  .marquee-content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    animation: scroll var(--animation-speed) linear infinite;

    /* Pause animation when reduced-motion is set */
    @media (prefers-reduced-motion: reduce) {
      .marquee-content {
        animation-play-state: paused !important;
      }
    }

    li {
      display: flex;
      flex-shrink: 0;
      flex-direction: column;
      justify-content: center;
      width: 20rem;

      img {
        max-width: 100%;
        height: 10rem;
      }
    }
  }

  @keyframes scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
  }