.logos {
	padding: 80px 24px 24px;

	@media screen and (min-width: 768px) {
		padding: 80px 48px 48px;
	}
}

.logos__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	row-gap: 40px;
	column-gap: 40px;
	max-width: 600px;
	margin: auto;

	.logos__media {
		width: auto;
		background: transparent;
		opacity: 0;
		transform: translateY(24px);
		transition:
			opacity 0.5s ease-out,
			transform 0.5s ease-out;
	}

	.logos__media--visible {
		opacity: 1;
		transform: translateY(0);
	}

	.logos__img {
		height: 40px;
		width: auto;
		object-fit: contain;
	}
}