@layer components {
	/* Mirrors the reference's `grid grid-cols-1 gap-10 lg:grid-cols-3` with the main column
	   spanning `lg:col-span-2`. */
	.about-intro-grid {
		display: grid;
		gap: 2.5rem;
		grid-template-columns: 1fr;
	}
	@media (min-width: 1024px) {
		.about-intro-grid { grid-template-columns: repeat(3, 1fr); }
		.about-intro-grid__main { grid-column: span 2; }
	}

	/* Mirrors `border-border bg-secondary rounded-2xl border p-6`. */
	.about-glance {
		border: 1px solid var(--color-border);
		background-color: var(--color-secondary);
		border-radius: var(--radius-xl);
		padding: 1.5rem;
	}
	.about-glance__title { font-size: 1.125rem; font-weight: 600; }
	.about-glance__list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; }
	.about-glance__list dt { font-weight: 600; color: var(--color-foreground); }
	.about-glance__list dd { margin: 0; color: var(--color-muted-foreground); }
}