/****************************************************************************
 * Grid
 * Flexbox-Workaround: Masonry-JS does not support Flexbox
 * https://github.com/desandro/masonry/issues/1053#issuecomment-405022401
 ****************************************************************************/
.row.grid, .grid{ display: block; }
.row.grid > .grid_item{ width: 100%; height: auto;}

.grid > .grid_item {
    width: 100%;
    -webkit-box-flex: none;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    max-width: none;
}

.grid > .sizer { width: 8.33333%;}
.grid > .grid_item.small-1 { width: 8.33333%;}
.grid > .grid_item.small-2 { width: 16.66667%;}
.grid > .grid_item.small-3 { width: 25%;}
.grid > .grid_item.small-4 { width: 33.33333%;}
.grid > .grid_item.small-5 {width: 41.66667%;}
.grid > .grid_item.small-6 {width: 50%;}
.grid > .grid_item.small-7 {width: 58.33333%;}
.grid > .grid_item.small-8 {width: 66.66667%;}
.grid > .grid_item.small-9 {width: 75%;}
.grid > .grid_item.small-10 {width: 83.33333%;}
.grid > .grid_item.small-11 {width: 91.66667%;}
.grid > .grid_item.small-12 {width: 100%;}

@media screen and (min-width:40em){
    .grid > .sizer { width: 8.33333%;}
    .grid > .grid_item.medium-1 { width: 8.33333%;}
    .grid > .grid_item.medium-2 { width: 16.66667%;}
    .grid > .grid_item.medium-3 { width: 25%;}
    .grid > .grid_item.medium-4 { width: 33.33333%;}
    .grid > .grid_item.medium-5 {width: 41.66667%;}
    .grid > .grid_item.medium-6 {width: 50%;}
    .grid > .grid_item.medium-7 {width: 58.33333%;}
    .grid > .grid_item.medium-8 {width: 66.66667%;}
    .grid > .grid_item.medium-9 {width: 75%;}
    .grid > .grid_item.medium-10 {width: 83.33333%;}
    .grid > .grid_item.medium-11 {width: 91.66667%;}
    .grid > .grid_item.medium-12 {width: 100%; }
}

@media screen and (min-width:64em){
    .grid > .grid_item.sizer { width: 8.33333%;}
    .grid > .grid_item.large-1 { width: 8.33333%;}
    .grid > .grid_item.large-2 { width: 16.66667%;}
    .grid > .grid_item.large-3 { width: 25%;}
    .grid > .grid_item.large-4 { width: 33.33333%;}
    .grid > .grid_item.large-5 {width: 41.66667%;}
    .grid > .grid_item.large-6 {width: 50%;}
    .grid > .grid_item.large-7 {width: 58.33333%;}
    .grid > .grid_item.large-8 {width: 66.66667%;}
    .grid > .grid_item.large-9 {width: 75%;}
    .grid > .grid_item.large-10 {width: 83.33333%;}
    .grid > .grid_item.large-11 {width: 91.66667%;}
    .grid > .grid_item.large-12 {width: 100%;}
}



/****************************************************************************
 * Grid - Sizer
 ****************************************************************************/
.grid .sizer{ padding: 0; height: 0;}