* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }


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

.grid {
/*   background: red; */
  /* margin-left: 10px; */
}

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

/* ---- .grid-item ---- */
/* NB: margins calculated as part of the overall widths of items
Take note of cascading margins down through MQs */
 .grid-sizer,
.grid-item {
           width: 44%;
           margin: 0 3% 3% 3%;
}


/* @media print, screen and (min-width: 30em) {
   .grid-sizer,
   .grid-item {
               width: 31.333%;
   }
} */

 @media print, screen and (min-width: 40em) {
   .grid-sizer,
   .grid-item {
               width: 27.333%;
   }
} 

/*  @media print, screen and (min-width: 40em) {
  .grid-sizer,
  .grid-item {
              width: 23%;
  }
}  */



/* reduce the oversaturation */

 .grid-item img {
          width: 46%;
          margin: 0 2% 3% 2%;
          filter: saturate(90%);
}

.grid-item img:hover {filter: saturate(0%); } 
    

/* 
@media print, screen and (min-width: 50em) {
   .grid-sizer,
   .grid-item {
               width: 23%;
   }
} 

 @media print, screen and (min-width: 64em) {
  .grid-sizer,
  .grid-item {
              width: 18%;
  }
}  

@media print, screen and (min-width: 75em) {
  .grid-sizer,
  .grid-item {
              width: 14.666%;
  }
}  */

/*  .grid-sizer,
.grid-item {
           width: 98%;
           margin: 0 1% 2% 1%;
} */


  


/*  @media print, screen and (min-width: 50em) {
  .grid-sizer,
  .grid-item {
              width: 23%;
  }
} */  
 
   @media print, screen and (min-width: 64em) {
 .grid-sizer,
 .grid-item {
           margin: 0 2% 3% 2%;
           width: 21%;
 }
}  

/*   @media print, screen and (min-width: 64em) {
 .grid-sizer,
 .grid-item {
           width: 18%;
 }
}  */ 

  @media print, screen and (min-width: 100em) {
  .grid-sizer,
  .grid-item {
              width: 16%;
  }
}  





/* .grid-item {float: left;}

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