.logos__marquee {
  display: flex;
  overflow-x: hidden;
  user-select: none;
  mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
}

.marquee__logos {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1rem;
  min-width: 100%;
  animation: loop 20s linear infinite;
}

.marquee__logos img {
  display: block;
  margin-inline: 2rem;
  height: auto;
}

@keyframes loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}