* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.logos__marquee {
    width:800px;
    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)
    );
}
@media (max-width: 768px) {
    .logos__marquee{
        width: 100%;
    }
}

.marquee__logos {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    min-width: 100%;
    animation: loop 15s linear infinite;
}
.marquee__logos_slow{
    animation: loop 50s linear infinite;
}
.marquee__logos img {
    display: block;
    margin-inline: 1rem;
}

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