/* Extreme — photo row: three or four library photos in a row, light or dark. */
.ex.photos { padding: clamp(40px, 6vw, 72px) 0; background: #fff; color: var(--ex-ink-text); }
.ex.photos--dark { background: var(--ex-navy-900); color: var(--ex-text); }
.ex.photos .eyebrow { color: var(--ex-green-dark); }
.ex.photos--dark .eyebrow { color: var(--ex-green); }
.ex.photos .h2 { margin-bottom: 28px; }
.ex .ph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); }
.ex .ph-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ex .ph-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex .ph-item { margin: 0; }
.ex .ph-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
@media (max-width: 640px) {
	.ex .ph-grid, .ex .ph-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ex .ph-grid--3 .ph-item:first-child { grid-column: 1 / -1; }
	.ex .ph-grid--3 .ph-item:first-child img { aspect-ratio: 16 / 9; }
}