/**
 * Styles the dark service offer band that follows the portfolio proof.
 *
 * The cards offer a concise productised view without competing with future
 * dedicated service pages.
 */

.services-section {
	position: relative;
	overflow: hidden;
	padding-block: var(--inv-sect);
	background: var(--inv-ink-2);
	color: var(--inv-text-inv);
}

.services-section::before {
	position: absolute;
	inset: 0;
	background-image: var(--inv-grain);
	opacity: 0.1;
	content: "";
	pointer-events: none;
}

.services-section__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--inv-space-xl);
}

.services-section__intro {
	max-width: 54rem;
}

.services-section__intro h2 {
	margin-top: var(--inv-space-sm);
}

.services-grid {
	display: grid;
	gap: var(--inv-space-sm);
}

/* Two-up on tablet, four-up on desktop so the four service cards stay even. */
@media (min-width: 40rem) {
	.services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.services-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}