/* ---- hero masonry ---- */



.hero-masonry:after {
  content: '';
  display: block;
  clear: both;
}

.hero-item,
.hero-masonry .grid-sizer {
  width: 97%; /* juse a lil under  47 */
  margin: 10px 1%;
  float: left;

}

/* necessary for proper sizing with margins */
.hero-masonry .grid-sizer {
  position: absolute;
}




/* enough width for 4 columns */
@media screen and ( min-width: 720px ) {

  .hero-item,
  .hero-masonry .grid-sizer {
    width: 48%; 
    margin: 10px 1%;
    float: left;
  }
}

/* ---- desktop ---- */

@media screen and ( min-width: 960px ) {

.hero-item,
.hero-masonry .grid-sizer {
  width: 31%; 
  margin: 10px 1%;
  float: left;
}

 
}