/* ============================================================
   About — brand story, testimonial callout (floated right),
   who we are
   ============================================================ */

/* ---------- About Patrin (brand story) ---------- */
.about-patrin {
	margin-bottom: 80px;
}

.about-patrin::after {
	content: '';
	display: table;
	clear: both;
}

.about-patrin-heading {
	margin-bottom: 32px;
}

.about-patrin > p {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	max-width: 68ch;
}

.about-patrin > p + p {
	margin-top: 1em;
}

/* ---------- Testimonial callout ---------- */
.about-testimonial {
	float: right;
	width: 320px;
	margin: 4px 0 32px 48px;
	padding: 24px 24px 24px 28px;
	border-left: 3px solid var(--color-sage);
	background-color: var(--color-near-white);
	border-radius: 0 8px 8px 0;
}

.about-testimonial blockquote p {
	font-size: 15px;
	line-height: var(--lh-body);
	font-style: italic;
	color: var(--color-gunmetal);
	max-width: none;
}

.about-testimonial-attribution {
	margin-top: 16px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--color-sage);
	line-height: 1.4;
}

/* ---------- Who We Are ---------- */
.about-who-heading {
	margin-bottom: 32px;
}

.about-who-body p {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	max-width: 68ch;
}

.about-who-body p + p {
	margin-top: 1em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
	.about-patrin {
		margin-bottom: 60px;
	}
}

@media (max-width: 860px) {
	.about-testimonial {
		float: none;
		width: auto;
		margin: 0 0 40px 0;
	}

	.about-patrin > p,
	.about-who-body p {
		max-width: 100%;
	}
}

@media (max-width: 430px) {
	.about-patrin {
		margin-bottom: 40px;
	}

	.about-testimonial {
		padding: 20px 20px 20px 24px;
	}

	.about-who-heading {
		margin-bottom: 24px;
	}
}