/* Base gallery container: override Gutenberg flex layout and prep for Masonry */
.wp-block-gallery.hmgl-masonry-gallery {
    display: block !important;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 0 2rem;
    padding: 0;
    box-sizing: border-box;
    /* horizontal gutter via negative margin to offset item padding */
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

/* Extra specificity for Gutenberg flex layouts */
.wp-block-gallery.hmgl-masonry-gallery.is-layout-flex,
.wp-block-gallery.hmgl-masonry-gallery.wp-block-gallery-is-layout-flex {
    display: block !important;
}

/* Individual masonry items:
   width controlled via CSS vars & calc for responsive column count. */
.hmgl-masonry-gallery .hmgl-masonry-item {
    float: left;
    box-sizing: border-box;
    padding: 0 0.75rem 1.5rem;
    width: calc(100% / var(--hmgl-columns-desktop, 3));
}

/* Images fill their tile */
.hmgl-masonry-gallery .hmgl-masonry-item .hmgl-lightbox-link {
    display: block;
    width: 100%;
}

.hmgl-masonry-gallery .hmgl-masonry-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Clearfix for floated items (Masonry also sets container height, but this helps before init) */
.hmgl-masonry-gallery::after {
    content: "";
    display: block;
    clear: both;
}

/* Responsive: tablet */
@media (max-width: 1024px) {
    .hmgl-masonry-gallery .hmgl-masonry-item {
        width: calc(100% / var(--hmgl-columns-tablet, 2));
    }
}

/* Responsive: mobile */
@media (max-width: 640px) {
    .hmgl-masonry-gallery .hmgl-masonry-item {
        width: calc(100% / var(--hmgl-columns-mobile, 1));
    }
}