.container {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.masonry {
    column-count: 1;
    column-gap: 5px;
}

.masonry .brick {
    box-sizing: border-box;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    counter-increment: brick-counter;
    margin-bottom: 5px; 
    margin-right: 5px;  
}

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

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

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

.masonry img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.masonry .brick:last-child {
    margin-right: 0; 
}