.g1-collection-masonry {
    max-width: none;

    .g1-collection-item {
        display: inline-block; // Isotope doesn't like flexbox.
    }

    .g1-collection-viewport {
        margin-#{$left}: -10px;
        margin-#{$right}: -10px;
    }

    .g1-collection-item {
        width: 100%;

        padding-#{$left}: 5px;
        padding-#{$right}: 5px;

        > * {
            margin-bottom: 10px;
        }
    }
}

@media only screen and ( min-width: 480px ) {
    .g1-collection-masonry .g1-collection-item { width: percentage(1/2); }
}

@media only screen and ( min-width: 768px ) {
    .g1-collection-masonry .g1-collection-item {
        width: percentage(1/3);

        padding-#{$left}: 10px;
        padding-#{$right}: 10px;

        > * {
            margin-bottom: 20px;
        }
    }
}

@media only screen and ( min-width: 1025px ) {
    .g1-collection-masonry .g1-collection-item { width: percentage(1/4); }
}

@media only screen and ( min-width: 1280px ) {
    .g1-collection-masonry .g1-collection-item { width: percentage(1/5); }
}