/**
 * Komorebi Closing (km-closing): Figma "V11 Closing · Find the counter" (18:6592 / 18:7348 /
 * 18:8067).
 *
 * Sage. 1440: the km-split layout of main.css; the photo (square corners, at least 680 high)
 * on the left 720; on the right, 72 from the photo with the 120 gutter, padding 80: title and
 * line (16 apart), the figures 32 under them (3 × 164, Shippori 36 + label 14), the FAQ 32
 * under those and the caption 20 under the FAQ. 834 / 390: padding 56 / 32, the photo full
 * width (380 / 400) with the caption 10 under it, then the text 28 under the caption; title
 * and line 16 / 12 apart, figures 24 under (3 columns / stacked, 16 apart; 32 / 28), the FAQ
 * 28 under those.
 */

.km-closing__grid {
	grid-template-areas:
		"media body"
		"media caption";
	grid-template-rows: auto 1fr;
}

.km-closing__media {
	grid-area: media;
	min-height: var(--km-closing-photo-h, 680px);
}

.km .km-closing__body {
	grid-area: body;
	padding: var(--km-pad-t, 80px) var(--km-gutter) 0 72px;
}

.km-closing__caption {
	grid-area: caption;
	padding: 20px var(--km-gutter) var(--km-pad-b, 80px) 72px;
}

.km .km-closing__body .km-heading {
	margin-bottom: 32px;
}

.km-closing__figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 18px;
	margin-bottom: 32px;
}

.km-closing__figure {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.km-closing__figure-value {
	color: var(--km-heading);
	font-family: var(--km-serif);
	font-size: 36px;
	line-height: 1.2;
}

.km-closing__figure-label {
	font-size: 14px;
	line-height: var(--km-lh-text);
}

@media (max-width: 1024px) {
	.km-closing {
		padding-top: var(--km-pad-t, var(--km-section-pad));
		padding-bottom: var(--km-pad-b, var(--km-section-pad));
	}

	.km-closing__grid {
		grid-template-areas:
			"media"
			"caption"
			"body";
		grid-template-rows: none;
	}

	.km-closing__media {
		height: var(--km-closing-photo-h, 380px);
		min-height: 0;
	}

	.km-closing__caption {
		padding: 10px var(--km-gutter) 0;
	}

	.km .km-closing__body {
		padding: 28px var(--km-gutter) 0;
	}

	.km .km-closing__body .km-heading {
		margin-bottom: 24px;
	}

	.km-closing__figures {
		gap: 16px;
		margin-bottom: 28px;
	}

	.km-closing__figure-value {
		font-size: 32px;
	}
}

@media (max-width: 767px) {
	.km-closing__media {
		height: var(--km-closing-photo-h, 400px);
	}

	.km .km-closing__body .km-heading__text {
		margin-top: 12px;
	}

	.km-closing__figures {
		grid-template-columns: minmax(0, 1fr);
	}

	.km-closing__figure-value {
		font-size: 28px;
	}

	.km-closing__figure-label {
		font-size: var(--km-fs-small);
	}
}