/**
 * About, hero — one section of the design.
 *
 * The page's own words on cream, then a picture the width of the band beneath.
 */

.custom-about-hero__words {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	width: 100%;
	padding: 96px 48px;
	box-sizing: border-box;
}

.custom-about-hero__heading,
.custom-about-hero__body {
	margin: 0;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
}

.custom-about-hero__body {
	max-width: 1170px;
}

/* The picture runs the full width of the viewport; how tall it stands is the
   file's own measure and does not grow with the screen. */
.custom-about-hero__picture {
	position: relative;
	display: block;
	width: 100%;
	height: 640px;
	overflow: hidden;
}

.custom-about-hero__picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The heading is the section's own, not the theme's. */
.custom-about-hero__heading {
	padding: 0;
}

/* Tablet and mobile — the file draws one of them (11205:2923): the words 16
   in from either edge under the bar, the picture the width of the screen 24
   beneath them. Tablet is not drawn and takes the same figures, the picture
   deeper. */
@media ( max-width: 1024px ) {
	.custom-about-hero__words {
		gap: 16px;
		padding: 0 16px 24px;
	}

	.custom-about-hero__body {
		max-width: none;
	}

	.custom-about-hero__picture {
		height: 288px;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-about-hero__picture {
		height: 420px;
	}
}