/* Grade House Gallery — studio pictures in a sideways strip or a grid. */

.gh .gal { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.gh .gal__item { margin: 0; }
.gh .gal__frame { position: relative; overflow: hidden; background: var(--gh-paper-2); }
.gh .gal__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gh .gal__cap { margin-top: 10px; font: italic 400 14px/1.45 var(--gh-head); color: var(--gh-muted); }

/* strip */
.gh .gal--strip { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--gh-ink) var(--gh-line); }
.gh .gal--strip::-webkit-scrollbar { height: 4px; }
.gh .gal--strip::-webkit-scrollbar-track { background: var(--gh-line); }
.gh .gal--strip::-webkit-scrollbar-thumb { background: var(--gh-ink); }
.gh .gal--strip .gal__item { flex: 0 0 320px; scroll-snap-align: start; }
.gh .gal--strip .gal__frame { aspect-ratio: 4 / 5; }

/* grid */
.gh .gal--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gh .gal--grid .gal__frame { aspect-ratio: 4 / 3; }

.gh.gallery.tone-ink .gal__cap { color: #A9ACB2; }
.gh.gallery.tone-ink .gal--strip { scrollbar-color: #fff rgba(255, 255, 255, .2); }

@media (max-width: 1024px) {
	.gh .gal--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.gh .gal--strip .gal__item { flex-basis: 260px; }
	.gh .gal--grid { grid-template-columns: minmax(0, 1fr); }
}