Avatar Social-Proof Marquee

<div class="nuda-mq2-avatar-proof">
  <div class="nuda-mq2-avatar-proof__label" aria-hidden="true">Trusted by teams worldwide</div>
  <div class="nuda-mq2-avatar-proof__row" aria-hidden="true">
    <div class="nuda-mq2-avatar-proof__track">
      <div class="nuda-mq2-avatar-proof__avatar">JD</div>
      <div class="nuda-mq2-avatar-proof__avatar">MK</div>
      <div class="nuda-mq2-avatar-proof__avatar">AS</div>
      <div class="nuda-mq2-avatar-proof__avatar">RT</div>
      <div class="nuda-mq2-avatar-proof__avatar">LB</div>
      <!-- Duplicate the avatars above for a seamless loop -->
      <div class="nuda-mq2-avatar-proof__avatar">JD</div>
      <div class="nuda-mq2-avatar-proof__avatar">MK</div>
      <div class="nuda-mq2-avatar-proof__avatar">AS</div>
      <div class="nuda-mq2-avatar-proof__avatar">RT</div>
      <div class="nuda-mq2-avatar-proof__avatar">LB</div>
    </div>
  </div>
</div>

.nuda-mq2-avatar-proof {
  width: 100%;
  max-width: 280px;
}

.nuda-mq2-avatar-proof__label {
  font-size: .56rem;
  color: #777;
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.nuda-mq2-avatar-proof__row {
  overflow: hidden;
}

.nuda-mq2-avatar-proof__track {
  display: flex;
  width: max-content;
  animation: _nuda-mq2avatarproof 13s linear infinite;
}

.nuda-mq2-avatar-proof__avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  font-weight: 800;
  color: #0a0a0a;
  border: 2px solid #0a0a0a;
  margin-left: -8px;
}

.nuda-mq2-avatar-proof__avatar:first-child {
  margin-left: 0;
}

.nuda-mq2-avatar-proof__avatar:nth-child(5n+1) {
  background: #e4ff54;
}

.nuda-mq2-avatar-proof__avatar:nth-child(5n+2) {
  background: #7dd3fc;
}

.nuda-mq2-avatar-proof__avatar:nth-child(5n+3) {
  background: #fca5a5;
}

.nuda-mq2-avatar-proof__avatar:nth-child(5n+4) {
  background: #c4b5fd;
}

.nuda-mq2-avatar-proof__avatar:nth-child(5n+5) {
  background: #86efac;
}

.nuda-mq2-avatar-proof:hover .nuda-mq2-avatar-proof__track {
  animation-play-state: paused;
}

@keyframes _nuda-mq2avatarproof {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-mq2-avatar-proof__track {
    animation: none;
  }
}