.about .section-imageHtml {padding: 3rem 0; background-color: #fff;}

.about .section-imageHtml .pageRow {display: flex; flex-direction: column; gap: 1rem;}

.about .section-imageHtml .image {
	aspect-ratio: 530 / 700; border-radius: .75rem; background-color: var(--color-secondary);
	background-size: cover; background-position: center;
}

.about .section-imageHtml .panel {padding: 2.5rem 1.5rem; border-radius: .75rem; background-color: var(--color-primary);}

/* Content comes from a rich-text editor as <h2>/<h3>/<p> — style it like .sectionTitle's
   en/he eyebrow pair on a dark panel, since there's no other place in the project yet where
   editor output needs to render as a section title */
.about .section-imageHtml .panel h2 {
	line-height: 1.2; font-family: var(--font-heading); font-size: 1.9rem; font-weight: 300;
	letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.about .section-imageHtml .panel h3 {margin-top: .35rem; font-size: 1rem; font-weight: 400; color: rgba(255,255,255,.75);}
.about .section-imageHtml .panel p {margin-top: 1rem; line-height: 1.8; font-size: .9rem; color: rgba(255,255,255,.75);}

@media screen and (min-width: 40em) {
	.about .section-imageHtml .pageRow {flex-direction: row; align-items: stretch; gap: 1.5rem;}

	.about .section-imageHtml .image {flex: 0 0 34.4%; aspect-ratio: auto;}
	.about .section-imageHtml .panel {flex: 1 1 auto; padding: 4rem;}

	.about .section-imageHtml .panel h2 {font-size: 2.5rem;}
	.about .section-imageHtml .panel h3 {font-size: 1.2rem;}
	.about .section-imageHtml .panel p {font-size: 1rem; max-width: 32rem;}
}