.grid-container {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col-size, 300px), 100%), 1fr));
}

/* lightbox photo gallery */
.grid-container:has(.lightbox-image-container) {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2vw;

    .lightbox-image-container img {
        aspect-ratio: 1 /1;
    }
}