* { box-sizing: border-box; }


/* ---- grid ---- */

.grid {
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;	
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width: 32.66%;
}

.gutter-sizer { width: 1%; }

.grid-item {
  height: auto;
  float: left;
  margin-bottom: 1%;
}

.grid-item--width2 { width:  27%; }
.grid-item--width3 { width:  67%; }

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }