Image Marquee

marquee.css

.marquee-section {
  overflow: hidden;
  padding: 50px 0 72px;
  background: #f2f4ff;
}

.marquee-title {
  max-width: 1200px;
  margin: 0 auto 34px;
  padding: 0 16px;
  color: #050505;
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.marquee-wrapper::before,
.marquee-wrapper::after {
  position: absolute;
  top: 0;
  z-index: 2;
  width: min(10vw, 120px);
  height: 100%;
  pointer-events: none;
  content: "";
}

.marquee-wrapper::before {
  left: 0;
  background: linear-gradient(
    90deg,
    #f2f4ff 0%,
    rgba(242, 244, 255, 0) 100%
  );
}

.marquee-wrapper::after {
  right: 0;
  background: linear-gradient(
    270deg,
    #f2f4ff 0%,
    rgba(242, 244, 255, 0) 100%
  );
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
  will-change: transform;
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-image {
  display: block;
  width: max(3000px, 200vw);
  height: auto;
  flex: 0 0 auto;
  user-select: none;
  pointer-events: none;
}

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

@media (max-width: 991px) {
  .marquee-image {
    width: 2400px;
  }
}

@media (max-width: 575px) {
  .marquee-section {
    padding: 36px 0 54px;
  }
  .marquee-title {
    margin-bottom: 24px;
  }
  .marquee-image {

    width: 1800px;

  }
}

marquee.html

<section class="marquee-section">
  <h2 class="marquee-title">Image Marquee</h2>
  <div class="marquee-wrapper">
    <div class="marquee-track">
      <img
        src="wide-img.png"
        alt="Logo list"
        class="marquee-image"
      />
      <img
        src="wide-img.png"
        alt=""
        class="marquee-image"
        aria-hidden="true"
      />
    </div>
  </div>
</section>