/*
Block Name: About Note
Description: A note from the writer. Candid photo (shown in black and white), mixed heading, standfirst and body with a drop cap.
*/

.block-about-note { border-top: 0.3rem solid var(--brand-2); }
.block-about-note .an-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem 5.6rem; align-items: start; }
.block-about-note .an-grid.no-image { grid-template-columns: minmax(0, 1fr); }
.block-about-note .an-figure { margin: 0; }
.block-about-note .an-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(100%) contrast(1.05); }
.block-about-note .an-placeholder { aspect-ratio: 4 / 5; background: var(--brand-2); color: var(--brand-7); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2.4rem; }
.block-about-note .an-caption { margin-top: 1rem; text-align: right; color: var(--brand-6); }
.block-about-note .an-text { display: flex; flex-direction: column; gap: 2.4rem; max-width: 72rem; }
.block-about-note .an-standfirst { margin: 0; }
.block-about-note .an-body { columns: 2 28rem; column-gap: 4rem; column-rule: 0.1rem solid var(--brand-7); }
.block-about-note .an-body p { margin: 0 0 1.4rem; break-inside: avoid; }
.block-about-note .an-body p + p { margin-top: 0; }

@media screen and (max-width: 860px) {
	.block-about-note .an-grid { grid-template-columns: minmax(0, 1fr); }
	.block-about-note .an-figure { max-width: 48rem; }
}