.acf-gallery {
    --gallery-gap: 20px;
    display: grid;
    gap: var(--gallery-gap);
}

/* GRID CLASSICA */
.acf-gallery.grid {
    grid-template-columns: repeat(var(--gallery-columns), 1fr);
}

.acf-gallery.grid .gallery-item img {
    width: 100%;
    display: block;
}

/* MASONRY */
.acf-gallery.masonry {
    display: block; /* Masonry gestirà il layout */
}

.acf-gallery.masonry .gallery-item {
    margin-bottom: var(--gallery-gap);
    float: left;
    width: calc(100% / var(--gallery-columns) - (var(--gallery-gap) * (var(--gallery-columns) - 1) / var(--gallery-columns)));
}

.acf-gallery.masonry .gallery-item img {
    width: 100%;
    display: block;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .acf-gallery.grid {
        grid-template-columns: repeat(calc(var(--gallery-columns) - 1), 1fr);
    }
    .acf-gallery.masonry .gallery-item {
        width: calc(100% / max(var(--gallery-columns) - 1, 1) - (var(--gallery-gap) * (max(var(--gallery-columns) - 1, 1) - 1) / max(var(--gallery-columns) - 1, 1)));
    }
}

@media (max-width: 768px) {
    .acf-gallery.grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .acf-gallery.masonry .gallery-item {
        width: calc(50% - (var(--gallery-gap)/2));
    }
}

@media (max-width: 480px) {
    .acf-gallery.grid {
        grid-template-columns: 1fr;
    }
    .acf-gallery.masonry .gallery-item {
        width: 100%;
    }
}