.masonry {
    columns: 3;
    column-gap: 16px;
    margin: 16px auto;
}

.masonry .masonry-item {
    width: 100%;
    margin-bottom: 16px;
    break-inside: avoid;
}

.masonry .masonry-item img {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .masonry {
        columns: 2;
        column-gap: 8px;
    }

    .masonry .masonry-item {
        margin-bottom: 8px;
    }
}

@media screen and (max-width: 480px) {
    .masonry {
        columns: 1;
        column-gap: 0;
    }
}