/* ==========================================================================
   Problem statement
   Text only. The space around it is part of the design, so keep it generous.
   ========================================================================== */

.problem {
	padding-block: var(--space-section);
	background-color: var(--surface);
}

/* Phones: stacked, same heading-to-body rhythm as the hero.
   Tablets and up: heading left, body right, both starting on the same line. */
.problem__inner {
	display: grid;
	gap: var(--space-4);
}

.problem__title {
	max-width: 18ch;
	color: var(--brand-blue);
}

.problem__body {
	max-width: var(--measure);
	font-size: var(--text-lg);
}

@media (min-width: 48em) {
	.problem__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: start;
		gap: var(--space-7);
	}
}

@media (min-width: 64em) {
	.problem__inner {
		gap: var(--space-9);
	}
}