/**
 * About Us: intro. Title (h2 style, primary) and subtitle (caption,
 * capitals), then the page content flowing around the square intro photo
 * (components/media-flow): full width on mobile (Figma 328 × 328), floated
 * left at 287 / 1050 of the column from tablet (48em). Also the spacing of the About Us body column
 * (intro, team box, CTA: Figma 56px apart).
 */

.about-page {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
}

.about-intro {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.about-intro__heading {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.about-intro__title {
	color: var(--wp--preset--color--primary);
	overflow-wrap: break-word;
}

.about-intro__subtitle {
	color: var(--wp--preset--color--foreground);
	text-transform: uppercase;
}

.about-intro__body {
	--firm-media-flow-ratio: 1;
	--firm-media-flow-width: calc(100% * 287 / 1050);
	--firm-media-flow-background: var(--wp--preset--color--primary-dark);
}