body {
    margin: 0;
    font-family: sans-serif;
    background: #fafafa;
}

/* Masonry Grid */
.grid {
    max-width: 1200px;
    margin: 2rem auto;
}

.grid-sizer,
.grid-item {
    width: 33.333%;
    /* 3 columns */
}

@media (max-width: 800px) {

    .grid-sizer,
    .grid-item {
        width: 50%;
        /* 2 columns */
    }
}

@media (max-width: 500px) {

    .grid-sizer,
    .grid-item {
        width: 100%;
        /* 1 column */
    }
}

.grid-item {
    padding: 8px;
    box-sizing: border-box;
}

.grid-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: pointer;
}