.feature-grid {
	text-align: center;
}

/*
	Vertical dividers between columns — only once .grid-3 actually IS
	columns (its own min-width: 48em breakpoint; below that it's a single
	stacked column, where a vertical rule wouldn't mean anything). Split
	across two rules so each side of a divider gets its own 24px: the card
	before it gets padding-inline-end, the card after it gets
	padding-inline-start — :not(:first-child) is what keeps the very first
	card from getting a stray leading rule.

	The rule itself is a ::before, not a plain border-inline-start — a real
	border always runs the full height of the box, with no way to start it
	partway down without ALSO pushing the card's own content down (that's
	what padding-block-start would do, to the whole card, not just the
	line). ::before is positioned independently instead, inset 48px from
	the top and flush to the bottom, so only the line itself is shorter,
	nothing else in the card moves. Needs .feature to be the positioned
	containing block it's measured against, hence position: relative there.
	--color-border is the same muted-line token used for every other
	divider-ish rule in the theme (Vertical Space, blockquotes, tables).
*/
@media (min-width: 48em) {
	.feature {
		position: relative;
	}

	.feature:not(:last-child) {
		padding-inline-end: var(--space-5); /* 24px */
	}

	.feature:not(:first-child) {
		padding-inline-start: var(--space-5); /* 24px */

		&::before {
			content: "";
			position: absolute;
			inset-block: var(--space-8) 0; /* 48px from the top, flush to the bottom */
			inset-inline-start: 0;
			width: 1px;
			background-color: var(--color-border);
		}
	}
}

.feature > * + * {
	margin-block-start: var(--space-3);
}

.feature__icon {
	display: flex;
	justify-content: center;
	/* Collapses with .feature__header's own margin-block-start (space-3)
	   from the `* + *` rule above — the larger of the two wins, so this is
	   what actually sets the icon-to-header gap regardless. */
	margin-block-end: var(--space-6); /* 32px */

	& img {
		width: 3.75rem; /* 60px */
		height: 3.75rem; /* 60px */
		object-fit: contain;
	}
}

@media (max-width: 47.99em) {
	.feature__icon {
		margin-block-end: var(--space-4); /* 16px */
	}
}

.feature__header {
	/* Gap between the rule and whatever comes next — same collapsing
	   reasoning as .feature__icon above. */
	margin-block-end: var(--space-5); /* 24px */

	/*
		A real border-block-end would span the header's full width — no way
		to center a narrower one on its own. A block-level ::after, sized
		and centered independently via width + margin-inline: auto, is what
		actually allows a rule narrower than its parent.
	*/
	&::after {
		content: "";
		display: block;
		width: 70%;
		height: 3px;
		margin: var(--space-5) auto 0; /* 24px above, centered, flush below */
		background-color: var(--color-accent-bg);
	}
}

.feature__text {
	font-weight: var(--font-weight-light);
}

.feature__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--color-surface);

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.features__cta {
	margin-block-start: var(--space-8);
}