/* Image Grid */
.block-image-grid .image-grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.block-image-grid .image-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.block-image-grid .image-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block-image-grid .image-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.block-image-grid .image-grid__figure { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--c-surface-alt, #f3f1ec); margin: 0; }
.block-image-grid .image-grid__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.block-image-grid .image-grid__item:hover img { transform: scale(1.04); }
.block-image-grid .image-grid--landscape .image-grid__figure { aspect-ratio: 3 / 2; }
.block-image-grid .image-grid--square .image-grid__figure { aspect-ratio: 1; }
.block-image-grid .image-grid--portrait .image-grid__figure { aspect-ratio: 4 / 5; }
.block-image-grid .image-grid__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.75rem 1rem;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.75), transparent);
}

/* Natural: CSS columns masonry, images keep their own proportions. */
.block-image-grid .image-grid--natural { display: block; column-gap: clamp(1rem, 2vw, 1.75rem); }
.block-image-grid .image-grid--natural.image-grid--cols-2 { column-count: 2; }
.block-image-grid .image-grid--natural.image-grid--cols-3 { column-count: 3; }
.block-image-grid .image-grid--natural.image-grid--cols-4 { column-count: 4; }
.block-image-grid .image-grid--natural .image-grid__item { break-inside: avoid; margin-bottom: clamp(1rem, 2vw, 1.75rem); }
.block-image-grid .image-grid--natural .image-grid__figure img { height: auto; }

@media (max-width: 1024px) {
    .block-image-grid .image-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .block-image-grid .image-grid--natural.image-grid--cols-4,
    .block-image-grid .image-grid--natural.image-grid--cols-3 { column-count: 2; }
}
@media (max-width: 640px) {
    .block-image-grid .image-grid--cols-3,
    .block-image-grid .image-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    .block-image-grid .image-grid--cols-2 { grid-template-columns: 1fr; }
    .block-image-grid .image-grid--natural.image-grid--cols-2,
    .block-image-grid .image-grid--natural.image-grid--cols-3,
    .block-image-grid .image-grid--natural.image-grid--cols-4 { column-count: 1; }
}