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

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

.masonry {
    background-color: #000324;
    width: 100%;
    height: 100vh;
    padding: 1rem;

    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(14, 1fr);

    row-gap: 1rem;
    column-gap: 1rem;
}

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


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

.cell-3 {
    grid-column: 9 / 12;
    grid-row: 1 / 4;
}

.cell-4 {
    grid-column: 12 / -1;
    grid-row: 1 / 4;
}

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

.cell-6 {
    grid-column: 4 / 6;
    grid-row: 6 / 7;
}

.cell-7 {
    grid-column: 4 / 6;
    grid-row: 7 / 11;
}

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

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

.cell-10 {
    grid-column: 9 / 12;
    grid-row: 4 / 11;
}

.cell-11 {
    grid-column: 12 / 13;
    grid-row: 4 / 6;
}

.cell-12 {
    grid-column: 13 / -1;
    grid-row: 4 / 6;
}

.cell-13 {
    grid-column: 12 / -1;
    grid-row: 6 / 13;
}

.cell-14 {
    grid-column: 12 / -1;
    grid-row: 13 / -1;
}

/* 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;
    }
}