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

  /* clear fix */
  .grid:after {
    content: '';
    display: block;
    clear: both;
  }
  
  /* ---- .grid-item ---- */
  
  .grid-sizer, 
  .grid-item {
    width: 25%;
    padding: 10px; 
  }
  
  .grid-item--width2 { width: 50%; }
  .grid-item--width3 { width: 75%; }
  /*
  .grid-item--width4 { width: 50%; }
  .grid-item--width6 { width: 60%; }
  */
  
  .grid-item {
    float: left;
    /*background: #FFFFFF;*/
  }
  
  .grid-item img {
    display: block;
    max-width: 100%;
  }
  
  @media only screen and (max-width: 600px) {
    .grid-sizer, 
    .grid-item {
      width: 50%;
    }
    .grid-item--width2,
    .grid-item--width3,
    .grid-item--width4,
    .grid-item--width6{
      width: 95%;
    }
  }