/*
 * The about page (page-about.php): the few sizes the compiled Tailwind CSS does not have. The rest of the page is
 * made of the front page's classes.
 */

/* The first paragraph under the title: as the hero's lead, a little larger. */
.sst-about-lead {
	max-width: 40rem;
	font-size: 15.5px;
	line-height: 1.6;
	text-wrap: pretty;
}

/* The story on the lilac slip. */
.sst-about-text {
	max-width: 36rem;
	font-size: 15px;
	line-height: 1.7;
	text-wrap: pretty;
}

/* The line on the apricot slip. */
.sst-about-line {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	text-wrap: pretty;
}

/* The Latin brand inside Georgian capitals keeps its own case, in the Latin display face. */
.sst-about-latin {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: none;
	white-space: nowrap;
}

.mtavruli .sst-about-latin {
	font-weight: 800;
	letter-spacing: -0.03em;
}

@media (min-width: 40rem) {
	.sst-about-lead {
		font-size: 17.5px;
		line-height: 1.65;
	}

	.sst-about-text {
		font-size: 16.5px;
	}

	.sst-about-line {
		font-size: 20px;
	}
}

@media (min-width: 64rem) {
	/* The drawing sits on the left here (on the closing slip it is on the right). */
	.sst-about-art {
		padding-right: 0.75rem;
		padding-left: 2rem;
	}

	.sst-about-story {
		padding-block: 3.5rem;
		padding-right: 4rem;
		padding-left: 2.5rem;
	}
}

/* Spacing the compiled CSS does not have (the original used none of these steps). */
.sst-about-head {
	padding-top: 8rem;
	padding-bottom: 3.5rem;
}

.sst-about-main {
	padding-top: 3.5rem;
}

.sst-about-slip {
	padding-block: 2.25rem;
}

@media (min-width: 40rem) {
	.sst-about-head {
		padding-top: 10rem;
		padding-bottom: 5rem;
	}

	.sst-about-main {
		padding-top: 5rem;
	}

	.sst-about-slip {
		padding-block: 3rem;
	}
}

@media (min-width: 64rem) {
	.sst-about-pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}