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

.logos__marquee {
    width:900px;
	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 20s linear infinite;
}
.marquee__logos_slow{
    animation: loop 50s linear infinite;
}
.marquee__logos img {
	display: block;
	margin-inline: 2rem;
}

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