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

.grid {

}

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

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

.grid-sizer,
.grid-item {
   width: 24%; 
  /* width: 32%;*/
  /* padding: 0px; */
}

.gutter-sizer { width: 1%; /* width: 2%;*/ }

.grid-item {
  float: left;
  margin-bottom: 10px;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

@media only screen and (min-width: 1664px){
.grid-sizer,
.grid-item {
  width: 24%;
}
.gutter-sizer { width: 1%; }    
}

@media only screen and (max-width: 1280px){
.grid-sizer,
.grid-item {
  width: 32%;
}
.gutter-sizer { width: 2%; }    
}

@media only screen and (max-width: 1152px){
.grid-sizer,
.grid-item {
  width: 48%;
}
.gutter-sizer { width: 2%; }    
}

@media only screen and (max-width: 400px){
.grid-sizer,
.grid-item {
  width: 100%;
}
.gutter-sizer { width: 0%; }    
}