/**
 * Component: Hero
 * Usage: front page intro block. .hero > .hero__media (full width, on
 * top), .hero__body (below it, narrower reading width).
 */

.hero {
	margin-bottom: var(--space-6);
}

.hero__media {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
	margin-bottom: var(--space-5);
}

.hero__body {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.hero__eyebrow {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.hero__body p {
	font-size: var(--font-size-lg);
}

.hero__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-4);
}

/*
 * Below this width the two buttons don't have room to sit side by side
 * without wrapping their own text mid-word ("Read / Published / Work") —
 * stack them full-width instead.
 */
@media (max-width: 30rem) {
	.hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__actions .button {
		justify-content: center;
	}
}