/* ==========================================================================
   hero.css — Genva Craft

   A wide photograph with the text below it, never on it.
   ========================================================================== */

.hero > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.hero .hero__photo {
	max-width: var(--wide-max);
	margin-inline: auto;
}

.hero .hero__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@media (width < 720px) {

	.hero .hero__photo img {
		aspect-ratio: 4 / 3;
	}
}

.hero__body {
	text-align: center;
	padding-block: var(--section-pad);
}

.hero__body > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.hero__body > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

.hero .hero__title {
	font-size: var(--wp--preset--font-size--huge);
	letter-spacing: 0.1em;
	line-height: 1.5;
}

/* The short gold rule under the title. Core's separator draws a border of
   its own, reset here. */
.hero .hero__rule {
	width: 3rem;
	height: 1px;
	margin-inline: auto;
	border: 0;
	background-color: var(--wp--preset--color--line);
	opacity: 1;
}

.hero .hero__lead {
	color: var(--wp--preset--color--secondary);
}

.hero__actions {
	gap: var(--wp--preset--spacing--30);
}