/* ABOUTME: Styles for the partner/sponsor logos grid section. */
/* ABOUTME: Responsive grid layout with grayscale-to-color hover effect. */
section.regular_section.section--logos .content_wrapper {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: 1fr;
	gap: 0.5rem;
}

@media screen and (max-width: 1240px) {
	section.regular_section.section--logos .content_wrapper {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (max-width: 1024px) {
	section.regular_section.section--logos .content_wrapper {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* @media screen and (max-width: 600px) {
	section.regular_section.section--logos .content_wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
} */

.logo-tile {
	background-color: #efefef;
	aspect-ratio: 16 / 9;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-basis: 25%;
}

.section--background-colored .logo-tile {
	background: white;
}

.logo-tile picture {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 10px;
}

.logo-tile img {
	display: block;
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
	height: auto;
}

.logo-tile svg {
	display: block;
	object-fit: contain;
	max-width: calc(100% - 20px);
	max-height: calc(100% - 20px);
	width: 100%;
	height: 100%;
}