.medias {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	text-align: center;

	.medias-track {
		display: flex;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	}

	.medias-row {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 40px;
		padding: 0 40px 0 0;
		margin: 0;
		list-style: none;
		animation: medias-scroll 22s linear infinite;

		li {
			flex: 0 0 auto;
		}

		img {
			display: block;
			height: 40px;
			width: auto;
			object-fit: contain;
		}
	}

}

@media (hover: hover) {
	.medias:hover .medias-row {
		animation-play-state: paused;
	}
}

@media screen and (min-width: 720px) {
	.medias .medias-row {
		animation-duration: 38s;
		gap: 96px;
		padding-right: 96px;
	}
}

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