/* Technology logo grid pattern
---------------------------------------------------------------------------- */

.cn-tech-logo-grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: visible;
}

.cn-tech-logo-grid__item {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0;
	min-height: clamp(5.5rem, 10vw, 8rem);
	padding: clamp(0.75rem, 1.5vw, 1.25rem);
}

.cn-tech-logo-grid > *,
.cn-tech-logo-grid__item > * {
	margin: 0 !important;
	max-width: none !important;
}

.cn-tech-logo-grid__mark {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0;
	min-height: 3rem;
	width: 100%;
}

.cn-tech-logo-grid__mark img {
	display: block;
	filter: grayscale(1) brightness(0) opacity(0.78);
	height: clamp(2rem, 4vw, 3.25rem);
	max-width: min(9rem, 100%);
	object-fit: contain;
	object-position: center;
	transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
	user-select: none;
	width: auto;
	-webkit-user-drag: none;
}

[data-theme="dark"] .cn-tech-logo-grid__mark img {
	filter: grayscale(1) brightness(0) invert(1) opacity(0.86);
}

.cn-tech-logo-grid__item:hover .cn-tech-logo-grid__mark img,
.cn-tech-logo-grid__item:focus-within .cn-tech-logo-grid__mark img {
	filter: none;
	opacity: 1;
	transform: translateY(-0.08rem);
}

@media (max-width: 900px) {
	.cn-tech-logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.cn-tech-logo-grid__item {
		min-height: 5rem;
		padding: 1rem;
	}

	.cn-tech-logo-grid__mark img {
		height: 2.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-tech-logo-grid__mark img {
		transition: none;
	}

	.cn-tech-logo-grid__item:hover .cn-tech-logo-grid__mark img,
	.cn-tech-logo-grid__item:focus-within .cn-tech-logo-grid__mark img {
		transform: none;
	}
}