.masonry {
    column-count: 1;
    column-gap: 1rem;
}

@media (min-width: 576px) {
    .masonry {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .masonry {
        column-count: 3;
    }
}

@media (min-width: 992px) {
    .masonry {
        column-count: 4;
    }
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
}

.masonry-item img {
    width: 100%;
    border-radius: 0.5rem;
    display: block;
    border: 2px solid #000;
    transition: transform 0.3s ease;
}
.masonry-item img:hover {
    cursor: pointer;
    transform: scale(1.06);
}