/* A teacher profile: portrait column beside the bio and questions. */

.teacher {
	display: grid;
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	align-items: start;
	gap: var(--space-5) clamp(var(--space-4), 6vw, var(--space-10));
}

.teacher__media {
	position: sticky;
	inset-block-start: calc(var(--masthead-height) + var(--space-3));
	display: grid;
	gap: var(--space-2);
	justify-items: start;
}

.teacher__img {
	width: 100%;
	aspect-ratio: 27 / 32;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.teacher__body {
	max-width: var(--measure);
}

.teacher__body > h2 {
	font-size: var(--font-7);
}

.teacher__body > h2:not(:first-child) {
	margin-block-start: var(--space-6);
}

.qa {
	display: grid;
	gap: var(--space-3);
}

.qa__question {
	font-weight: var(--weight-semi);
	color: var(--color-heading);
}

.qa__answer {
	margin: var(--space-05) 0 0;
}

@media (max-width: 799px) {
	.teacher {
		grid-template-columns: minmax(0, 1fr);
	}

	.teacher__media {
		position: static;
		max-width: 22rem;
	}
}