/*.grid { 
  max-width:100%; 
   
}
 
.grid:after {
  content: '';
  display: block;
  clear: both;
} 
.grid-sizer,
.grid-item {
  width: 33%;
}
.gutter-sizer
{
     width: 5px; 
}
.grid-item {
  height: 200px;
  float: left; 
   margin-bottom: 5px;
}
.grid-item--width1 { width: 33%; } 
.grid-item--width2 { width: 66%; } 
.grid-item--width3 { width: 99%; }
.grid-item--width4 { width: 100%; }

.grid-item--height1 { height: 250px; }
.grid-item--height2 { height: 500px; }
.grid-item--height3 { height: 750px; }
.grid-item--height4 { height: 900px; }

 @media only screen and (max-width: 600px) {
  .grid-item {
  width:50%;
  height: 200px;   
} 
  .grid-item--width1 { width: 50%; }
  .grid-item--width3 { width: 100%; }
.grid-item--width2 { width: 100%; }
.grid-item--height1 { height: 250px; }
.grid-item--height2 { height: 500px; }
.grid-item--height3 { height: 750px; }
.grid-item--height4 { height: 900px; }

}*/ 
.container2 {
	 margin: 0 auto;
}
 .grid-item {
	 margin-bottom: 10px;
	 overflow: hidden;
	 z-index: 1;
	 text-decoration: none;
	 transition: all 120ms ease;
}
 .grid-item:before {
	 content: "";
	 display: block;
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background: #f9f9f9;
	 z-index: -1;
	 transform: scale(0);
	 opacity: 0;
	 transition: all 100ms ease;
}
 .grid-item:hover {
	 opacity: 0.75;
}
 .grid-item:hover::before {
	 transform: scale(1);
	 opacity: 1;
}
 .grid-item img {
	 width: 100%;
	 height: auto;
	 display: block;
}
 .grid-sizer, .grid-item {
	 width: 32.8%;
}
 .item2 {
	 width: 66.2%;
}
 .item3 {
	 width: 99.9999%;
}
 .gutter-sizer {
	 width: 10px;
}
 @media screen and (max-width: 750px) {
	 .grid-sizer, .grid-item {
		 width:48%;
	}
	 .item2, .item3 {
		 width: 100%;
	}
}
 @media screen and (max-width: 500px) {
	 grid-sizer, .grid-item {
		 width:48%;
	}
	 .item2, .item3 {
		 width: 100%;
	}
}