.logos {
	--width-logo: 200px;
	--height-logo: 160px;

	--width-logo-company: 270px;
	--height-logo-company: 100px;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10.5vw;
	padding: 6.25em;
}

.logos.logos-company {
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 5vw;
	padding-left: 0;
	padding-right: 0;
}

.logos-image-container {
	width: calc(25% - 7.88vw);
	max-width: var(--width-logo);
	height: 100%;
	text-align: center;
}

.logos-image {
	width: 100%;
	height: 100%;
	max-width: var(--width-logo);
	max-height: var(--height-logo);
}

.logo-company {
	max-width: var(--width-logo-company);
}

.logo-company .logos-image {
	max-width: var(--width-logo-company);
	max-height: var(--height-logo-company);
}

@media screen and (min-width: 1920px) {
	.logos {
		gap: 200px;
	}

	.logos-image-container {
		width: calc(25% - 150px);
	}
}

@media screen and (max-width: 1023px) {
	.logos, .logos.logos-company {
		padding: 4em 0;
		gap: 4em;
		flex-wrap: wrap;

		--width-logo: 100px;
		--height-logo: 100px;
	}

	.logos-image-container {
		width: calc(33.3333% - 2.6666em);
		max-height: none;
		max-width: none;
	}

	.logos.logos-company .logos-image-container {
		width: calc(50% - 2em);
	}
}

@media screen and (max-width: 720px) {
	.logos {
		--height-logo-company: 60px;
	}
}

@media screen and (max-width: 640px) {
	.logos, .logos.logos-company {
		gap: 2em;
	}

	.logos-image-container {
		width: calc(33.3333% - 1.3333em);
	}
}

@media screen and (max-width: 540px) {
	.logos-image-container {
		width: calc(50% - 1em);
	}
}

@media screen and (max-width: 420px) {
	.logos {
		--height-logo-company: 40px;
	}
}