.page-head { max-width: 900px; margin-bottom: var(--sp-64); }
.page-head .display { margin-bottom: var(--sp-24); }

/* Three explicit columns rather than CSS columns, so the order reads the way
   the mockup placed it. */
.masonry {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: start;
}
.masonry > div { display: grid; gap: 20px; }
.masonry figure { aspect-ratio: 422 / 321; border-radius: var(--r-card); overflow: hidden; }
.masonry figure.square { aspect-ratio: 422 / 420; }

@media (max-width: 800px) {
	.masonry { grid-template-columns: 1fr; }
}