/* John Morley — Materials: square close-ups in a row, numbered and named */
.jm.mats { padding: clamp(72px, 8vw, 120px) 0; background: var(--white); }
.jm .mats__head { display: grid; gap: 0; max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.jm .mats__h { margin: 0; font: 800 var(--fs-h2)/.92 var(--font-display); text-transform: uppercase; letter-spacing: .005em; color: var(--slate); text-wrap: balance; }
.jm .mats__lead { margin-top: 18px; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--slate-2); }

.jm .mats__list { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.jm .mat figure { margin: 0; }
.jm .mat__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--lime-2); }
.jm .mat__img img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.jm .mat:hover .mat__img img { transform: scale(1.06); }
.jm .mat figcaption { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--slate); }
.jm .mat__no { flex: none; font: 900 22px/1 var(--font-display); color: var(--clay); }
.jm .mat__name { font: 800 clamp(22px, 1.8vw, 28px)/1 var(--font-display); text-transform: uppercase; color: var(--slate); }

/* fewer than four: keep the squares from getting huge */
.jm.mats:not(.mats--one) .mats__list { max-width: calc(var(--n) * 340px); }

/* one material: heading beside a single wide panel */
.jm.mats--one .mats__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(32px, 5vw, 88px); }
.jm.mats--one .mats__head { margin-bottom: 0; }
.jm.mats--one .mats__list { grid-template-columns: minmax(0, 1fr); }
.jm.mats--one .mat__img { aspect-ratio: 16 / 10; }

@media (max-width: 1024px) {
	.jm.mats--one .mats__in { grid-template-columns: minmax(0, 1fr); }
	.jm .mats__list { grid-template-columns: repeat(var(--n2, 2), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	/* three or more: a sideways row that peeks at the next */
	.jm.mats:not(.mats--one) .mats__list { display: flex; gap: 14px; max-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; }
	.jm.mats:not(.mats--one) .mats__list::-webkit-scrollbar { display: none; }
	.jm.mats:not(.mats--one) .mat { flex: 0 0 72%; scroll-snap-align: start; }
	.jm .mat__name { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.jm .mat:hover .mat__img img { transform: none; }
}