.masonry, .masonry * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.masonry img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    pointer-events: none;
    -o-object-fit: cover;
    object-fit: cover;
}

.masonry {
    background-color: #ffffff;
    width: 100%;
    height: 100vh;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(16, 1fr);
    row-gap: 1rem;
    column-gap: 1rem;
}


.cell-1 {
    grid-column: 1 / 8;
    grid-row: 1 / 6;

}

    .cell-1 img{
        object-position: 50% 15%;
    }


.cell-2 {
    grid-column: 8 / 12;
    grid-row: 1 / 5;
}
    .cell-2 img{
        object-position: 30% 50%;
    }

.cell-3 {
    grid-column: 8 / -1;
    grid-row: 5 / 11;
}
    .cell-3 img{
        object-position: 40% 10%;
    }


.cell-4 {
    grid-column: 12 / -1;
    grid-row: 1 / 5;
}
    .cell-4 img{
        object-position: 50% 30%;
    }


.cell-5 {
    grid-column: 1 / 5;
    grid-row: 11 / -1;
}

    .cell-5 img{
        object-position: 50% 50%;
    }


.cell-6 {
    grid-column: 1 / 8;
    grid-row: 6 / 11;
}

    .cell-6 img{
        object-position: 50% 15%;
    }


.cell-7 {
    grid-column: 10 / -1;
    grid-row: 11 / -1;
}

    .cell-7 img{
        object-position: 20% 0;
    }

.cell-8 {
    grid-column: 5 / 10;
    grid-row: 11 / -1;
}
    .cell-8 img{
        object-position: 25% 60%;
    }




/* Responsive */
/* Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
    .masonry {
        background-color: white;
        width: 100%;
        height: 100vh;
        padding: 1rem;
        display: flex;
        flex-flow: column;
    }
}
*/