/**
 * About page.
 *
 * Two widths, both taken from the 1920px design: the photo runs 1590px wide
 * (166px gutters) and the body copy sits narrower at 1276px inside it.
 */

.rth-about {
	flex: 1;
	min-width: 0;
	/* The dots overhang the photo; clip so they never scroll the page. */
	overflow-x: clip;
}

.about-page {
	margin-inline: clamp(20px, 8.65vw, 166px); /* 166 / 1920 */
	padding-block: var(--space-xl) var(--space-2xl);
}

.about-page__headline {
	margin-bottom: clamp(2.5rem, 5vw, 5.5rem);
}

.about-page__dots {
	position: absolute;
	z-index: -1;
	height: auto;
	pointer-events: none;
}

.about-page__dots--left {
	left: 0;
	top: 0;
	width: 28%;
	transform: translate(-30%, -22%);
}

.about-page__dots--right {
	left: 100%;
	top: 100%;
	width: 21%;
	transform: translate(-68%, -68%);
}

.about-page__body {
	max-width: min(80.3%, 1276px);
	margin-inline: auto;
	padding-top: var(--space-2xl);
}

/* Journey */
.about-page__journey {
	display: grid;
	grid-template-columns: 1.37fr 1fr;
	gap: var(--space-2xl);
	align-items: center;
}

.about-page__map {
	position: relative;
	width: 100%;
	max-width: 434px;
	margin: 0;
	justify-self: center;
}

.about-page__map::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 12% -8% -8% 12%;
	background: var(--color-mint);
	border-radius: var(--radius);
}

.about-page__map-img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

/* Care cards */
.about-page__care {
	margin-top: var(--space-2xl);
}

.about-page__care-heading {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display); /* Lexend */
	font-weight: 600;
	font-size: calc(clamp(1.5rem, 1.82vw, 2.1875rem) * var(--fs-scale)); /* 35px */
	line-height: 1.143; /* 40 / 35 */
	letter-spacing: 0;
	color: black;
}

.about-page__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-page__card {
	padding: var(--space-lg) var(--space-md);
}

.about-page__closing {
	margin-top: var(--space-2xl);
}

@media (max-width: 900px) {
	.about-page__journey {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.about-page__cards {
		grid-template-columns: 1fr;
	}

	.about-page__dots {
		display: none;
	}
}