/* Masonry overrides — loaded only on configured pages (gated by PHP) */

/* Override Divi's CSS Grid with a Masonry-compatible block container */
.et_pb_gallery_items {
    display: block !important;
    position: relative;
}

/* 4-column items: 25% width with padding gap */
.et_pb_gallery_item {
    width: 25%;
    padding: 6px;
    box-sizing: border-box;
    float: left; /* pre-Masonry fallback so layout isn't broken before JS runs */
}

/* Keep images filling their container */
.et_pb_gallery_item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Tablet: 3 columns (Divi breakpoint) */
@media (max-width: 980px) {
    .et_pb_gallery_item {
        width: 33.333%;
    }
}

/* Mobile landscape: 2 columns */
@media (max-width: 767px) {
    .et_pb_gallery_item {
        width: 50%;
    }
}

/* Mobile portrait: 1 column */
@media (max-width: 479px) {
    .et_pb_gallery_item {
        width: 100%;
    }
}