/* ----------------------------
Masonry Gallery
---------------------------- */
.mbb-masonry-gallery {
    display: flex;
    flex-wrap: wrap;
    margin: -5px; /* unified gutter */
}
.mbb-masonry-gallery .masonry-item {
    margin: 5px;
    width: calc(33.333% - 10px); /* 3 columns desktop */
    box-sizing: border-box;
}
.mbb-masonry-gallery .masonry-item img {
    width: 100%;
    display: block;
    height: auto;
}

/* Masonry Responsive */
@media (max-width: 1024px) {
    .mbb-masonry-gallery .masonry-item {
        width: calc(50% - 10px); /* 2 columns tablet */
    }
}
@media (max-width: 600px) {
    .mbb-masonry-gallery .masonry-item {
        width: 100%; /* 1 column mobile */
    }
}

/* ----------------------------
Mosaic Gallery
---------------------------- */
.mbb-mosaic-gallery {
    display: flex;
    flex-wrap: wrap;
    margin: -5px; /* unified gutter like masonry */
}
.mbb-mosaic-gallery .mosaic-item {
    margin: 5px;
    flex: 1 1 calc(33.333% - 10px); /* 3 columns desktop */
    box-sizing: border-box;
}
.mbb-mosaic-gallery .mosaic-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mosaic Responsive */
@media (max-width: 1024px) {
    .mbb-mosaic-gallery .mosaic-item {
        flex: 1 1 calc(50% - 10px); /* 2 columns tablet */
    }
}
@media (max-width: 600px) {
    .mbb-mosaic-gallery .mosaic-item {
        flex: 1 1 100%; /* 1 column mobile */
    }
}

/* ----------------------------
Grid Gallery
---------------------------- */
.gallery-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: -5px; /* unified gutter */
}
.gallery-list li {
    margin: 5px;
    flex: 1 0 calc(33.333% - 10px); /* 3 columns desktop */
    box-sizing: border-box;
}
.gallery-list img {
    width: 100%;
    display: block;
    height: auto;
}

/* Grid Responsive */
@media (max-width: 1024px) {
    .gallery-list li {
        flex: 1 0 calc(50% - 10px); /* 2 columns tablet */
    }
}
@media (max-width: 600px) {
    .gallery-list li {
        flex: 1 0 100%; /* 1 column mobile */
    }
}
