.client-logos {
	--client-logos-max-width: 1280px;
	--client-logos-gap: 16px;
	--client-logos-radius: 10px;

	width: 100%;
	padding: 68px 0 84px;
	background: #f8f6f6;

	box-sizing: border-box;
}

.client-logos *,
.client-logos *::before,
.client-logos *::after {
	box-sizing: border-box;
}


/* Container */
.client-logos__inner {
	width: 100%;
	max-width: var(--client-logos-max-width);

	margin-inline: auto;
}


/* Grid kolumn */
.client-logos__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));

	width: 100%;
	gap: var(--client-logos-gap);

	align-items: start;
}


/* Jedna kolumna = dwa logotypy */
.client-logos__column {
	display: flex;
	flex-direction: column;

	min-width: 0;
	gap: var(--client-logos-gap);
}


/* Karta */
.client-logos__card {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	background: #fff;
	border-radius: var(--client-logos-radius);

	text-decoration: none;
}


/* Duża karta */
.client-logos__card--large {
	aspect-ratio: 168 / 157;
	padding: 28px;
}


/* Mała karta */
.client-logos__card--small {
	aspect-ratio: 168 / 96;
	padding: 20px 24px;
}


/* Logo */
.client-logos__image {
	display: block;

	width: 100%;
	height: 100%;

	max-width: 100%;
	max-height: 100%;

	object-fit: contain;
}


/* Karty będące linkami */
a.client-logos__card {
	transition:
		transform 180ms ease,
		box-shadow 180ms ease;
}

a.client-logos__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgb(0 0 0 / 5%);
}

a.client-logos__card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}


/* Tablet + mobile */
@media (max-width: 991px) {

	.client-logos {
		--client-logos-gap: 12px;

		padding: 48px 0 56px;
	}


	/* Dwie kolumny */
	.client-logos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


	/* Mniejsze paddingi kart */
	.client-logos__card--large {
		padding: 20px;
	}

	.client-logos__card--small {
		padding: 16px 18px;
	}


	/*
	 * Jeśli liczba kolumn jest nieparzysta,
	 * ostatnia zajmuje pełną szerokość gridu.
	 */
	.client-logos__grid > .client-logos__column:last-child:nth-child(odd) {
		grid-column: 1 / -1;

		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: var(--client-logos-gap);
	}


	/*
	 * Dwa logotypy w ostatniej szerokiej kolumnie
	 * są wyświetlane jako równe, niskie kafle.
	 */
	.client-logos__grid
		> .client-logos__column:last-child:nth-child(odd)
		.client-logos__card {
		aspect-ratio: 168 / 96;
		padding: 16px 18px;
	}

}