.masonry {
    display: masonry;
    column-count: 4;
    column-gap: 1.5vw;
    margin: 1.5vh 1.5vw;
    margin-top: 2vh;
}

.mansory-item[href] {
    background-color: white;
}

.masonry-item a {
    text-decoration: none;
}

.masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.5vw;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.masonry-item img {
    width: 99%;
    display: block;
}

.masonry-item h3 {
    font-family: "Google Sans Code";
    font-size: 16px;
    font-weight: 400;
    padding: 0.5vw;
    color: #b3b3b3;
}

@media (max-width: 320px) {
    .masonry {
        column-count: 1;
    }
}

@media (min-width: 321px) and (max-width: 768px){
    .masonry {
        column-count: 2;
    }
}

@media (min-width: 769px) and (max-width: 1200px){
    .masonry {
        column-count: 3;
    }
}

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