@layer wpsa.modules {
	.wpsa-hero {
		display: grid;
		gap: var(--wpsa-space-xl);
		align-items: center;
	}

	.wpsa-hero__heading {
		font-size: var(--wpsa-text-3xl);
		letter-spacing: -0.035em;
	}

	.wpsa-hero__text {
		display: flex;
		flex-direction: column;
		gap: var(--wpsa-space-md);
	}

	.wpsa-hero .wpsa-lede {
		max-width: 46ch;
		font-size: var(--wpsa-text-lg);
	}

	.wpsa-hero__image {
		width: 100%;
		border-radius: var(--wpsa-radius-lg);
		/* Reserve the box before the image decodes so the hero never shifts. */
		aspect-ratio: 16 / 10;
		object-fit: cover;
		box-shadow: var(--wpsa-shadow-lg);
	}

	.wpsa-hero--centred .wpsa-hero__text {
		align-items: center;
		text-align: center;
	}

	.wpsa-hero--centred .wpsa-lede {
		max-width: 58ch;
	}

	.wpsa-hero--centred .wpsa-actions {
		justify-content: center;
	}

	/* A centred hero has no image column, so it carries the full section on
	   type alone and can afford to be taller and larger. */
	.wpsa-hero--centred .wpsa-hero__heading {
		font-size: clamp(2.5rem, 6vw, 4.5rem);
		max-width: 18ch;
	}

	@media (width >= 56rem) {
		.wpsa-hero--split {
			grid-template-columns: 1.05fr 1fr;
		}
	}
}