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

.home .section-about .content {display: flex; flex-direction: column; gap: 2.5rem;}

.home .section-about .text {display: flex; flex-direction: column; align-items: flex-start;}
.home .section-about .text .sectionTitle {margin-bottom: 1.5rem;}
.home .section-about .text .editor-content p {margin-bottom: 1rem; line-height: 1.8; font-size: .9rem; color: var(--color-primary);}
.home .section-about .text .editor-content p:last-child {margin-bottom: 0;}
.home .section-about .text .mButton {margin-top: 2rem;}

/* Two photos side by side, vertically centered — the taller one naturally sticks out
   above/below the shorter one, matching the design's staggered look with no absolute positioning */
.home .section-about .photos {display: flex; align-items: center; gap: 1rem;}
.home .section-about .photo {background-color: #eee; background-size: cover; background-position: center; border-radius: .75rem;}
.home .section-about .photo.secondary {flex: 0 0 40%; aspect-ratio: 355 / 531;}
.home .section-about .photo.primary {flex: 0 0 57%; aspect-ratio: 530 / 698;}

@media screen and (min-width: 40em) {
	.home .section-about .content {flex-direction: row; align-items: center; gap: 4rem; padding: 2rem 0;}

	.home .section-about .text {flex: 1 1 40rem;}
	.home .section-about .text .editor-content p {font-size: 1rem; max-width: 34rem;}

	.home .section-about .photos {flex: 1 1 34rem;}
}