/* Section: hero (with breadcrumbs on pages below another page). */

.section-hero {
	padding-block: var(--space-7) var(--space-8);
}

.section-hero__inner {
	display: grid;
	gap: var(--space-6);
	align-items: center;
}

@media (min-width: 56rem) {

	.section-hero--media .section-hero__inner {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

.section-hero__heading {
	margin: 0 0 var(--space-4);
	font-size: var(--step-5);
}

/* An icon before the title (decorative), as big as the letters, on the
   first line. */
.section-hero__mark {
	display: inline-block;
	margin-right: 0.2em;
	color: var(--color-accent);
	vertical-align: -0.1em;
}

.section-hero__mark .icon {
	display: block;
	width: 0.95em;
	height: 0.95em;
}

.section-hero__lead {
	max-width: var(--measure);
	margin: 0;
	color: var(--color-text);
	font-size: var(--step-1);
}

.section-hero__points {
	margin: var(--space-5) 0 0;
	font-weight: 600;
}

.section-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.section-hero__media {
	justify-self: stretch;
	max-width: 100%;
}

@media (min-width: 56rem) {

	.section-hero__media {
		justify-self: end;
		max-width: 28rem;
	}
}

/* Illustration instead of an image: decorative, so phones skip it. */
.section-hero__art {
	display: none;
}

@media (min-width: 56rem) {

	.section-hero__art {
		display: grid;
		width: 100%;
	}
}

.section-hero__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-media);

	/* Photos; cut-out images are transparent at the corners. */
}

/* Compact: a hero with only a title and a lead (no buttons, no image), as on
   the level test and the blog, so the page's own content comes first. */
.section-hero:not(.section-hero--media):not(:has(.section-hero__actions)) {
	padding-block: var(--space-6);
}

.section-hero:not(.section-hero--media):not(:has(.section-hero__actions)) .section-hero__heading {
	margin-bottom: var(--space-3);
	font-size: var(--step-4);
}