/* Shared photo rhythm for the four featured film projects. */
.photo-project-media { --photo-gap:24px; display:grid; gap:var(--photo-gap); }
.project-gallery { display:grid; gap:var(--photo-gap); }
.gallery-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--photo-gap) 12px; align-items:start; }
.gallery-row-single { grid-template-columns:minmax(0,1fr); }
.gallery-frame { position:relative; overflow:hidden; margin:0; min-width:0; background:#171717; }
.gallery-frame img { position:absolute; display:block; width:var(--image-width); max-width:none; height:auto; left:var(--image-left); top:var(--image-top); }
.photo-project-media .remedy-product-use { gap:var(--photo-gap) 12px; }
.photo-project-media .remedy-product-use img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
@media(max-width:760px) {
 .photo-project-media { --photo-gap:16px; }
 .gallery-row { grid-template-columns:minmax(0,1fr); }
}

/* Keep each image inside its own grid cell at a shared row height. */
.gallery-row-pebble .gallery-frame { aspect-ratio:4/3; width:100%; }
.gallery-row-pebble .gallery-frame img,
.gallery-row-garden-portraits .gallery-frame img { width:100%; height:100%; left:0; top:0; object-fit:cover; object-position:center; }
.gallery-row-garden-portraits .gallery-frame { width:100%; aspect-ratio:4/3; }
.gallery-row-garden-portraits .gallery-frame:first-child img { object-position:42% center; }
.gallery-row-garden-portraits .gallery-frame:last-child img { object-position:65% center; }
@media(min-width:761px) {
 .gallery-row-pebble { grid-template-columns:minmax(0,44fr) minmax(0,56fr); aspect-ratio:8/3; align-items:stretch; }
 .gallery-row-pebble .gallery-frame { aspect-ratio:auto; height:100%; min-height:0; }
}

.gallery-row-scoot-use .gallery-frame { width:100%; aspect-ratio:1672/941; }
.gallery-row-scoot-use .gallery-frame img { width:100%; height:100%; left:0; top:0; object-fit:cover; }
@media(min-width:761px) {
 .gallery-row-scoot-use { grid-template-columns:minmax(0,54fr) minmax(0,46fr); aspect-ratio:3344/941; align-items:stretch; }
 .gallery-row-scoot-use .gallery-frame { aspect-ratio:auto; height:100%; min-height:0; }
 .gallery-row-scoot-use .gallery-frame:first-child img { object-position:center; }
 .gallery-row-scoot-use .gallery-frame:last-child img { object-position:left center; }
}

/* Prevent intrinsic aspect ratios from widening the outer grid. */
.photo-project-media, .project-gallery { min-width:0; grid-template-columns:minmax(0,1fr); }
.gallery-row { width:100%; min-width:0; }

.gallery-row-garden-space .gallery-frame { width:100%; aspect-ratio:1672/941; }
.gallery-row-garden-space .gallery-frame img { width:100%; height:100%; left:0; top:0; object-fit:cover; object-position:center; }
@media(min-width:761px) {
 .gallery-row-garden-space { grid-template-columns:minmax(0,54fr) minmax(0,46fr); aspect-ratio:3344/941; align-items:stretch; }
 .gallery-row-garden-space .gallery-frame { aspect-ratio:auto; height:100%; min-height:0; }
 .gallery-row-garden-space .gallery-frame:first-child img { object-position:center top; }
}

.gallery-row-remedy-detail .gallery-frame { width:100%; aspect-ratio:16/9; }
.gallery-row-remedy-detail .gallery-frame img { width:100%; height:100%; left:0; top:0; object-fit:cover; object-position:center; }
@media(min-width:761px) {
 .gallery-row-remedy-detail { grid-template-columns:minmax(0,44fr) minmax(0,56fr); aspect-ratio:200/63; align-items:stretch; }
 .gallery-row-remedy-detail .gallery-frame { aspect-ratio:auto; height:100%; min-height:0; }
}

.gallery-row-f1 .gallery-frame { width:100%; aspect-ratio:4/3; }
.gallery-row-f1-1 .gallery-frame { aspect-ratio:16/9; }
.gallery-row-f1 .gallery-frame img { width:100%; height:100%; left:0; top:0; object-fit:cover; object-position:center; }
.gallery-row-f1-1 .gallery-frame:first-child img { object-position:center top; }
.gallery-row-f1-3 .gallery-frame:first-child img { object-position:30% center; }
.gallery-row-f1-3 .gallery-frame:last-child img { object-position:right center; }
@media(min-width:761px) {
 .gallery-row-f1 { grid-template-columns:minmax(0,54fr) minmax(0,46fr); aspect-ratio:8/3; align-items:stretch; }
 .gallery-row-f1-1 { aspect-ratio:32/9; }
 .gallery-row-f1-2 { grid-template-columns:minmax(0,46fr) minmax(0,54fr); }
 .gallery-row-f1 .gallery-frame { aspect-ratio:auto; height:100%; min-height:0; }
}

.gallery-row-f1-2 .gallery-frame:first-child img { object-position:85% center; }