/* -------------------------------------------------------------------
 * ## masonry layout
 * ------------------------------------------------------------------- */
.masonry-wrap {
   max-width: none;
   width: 100%;
   overflow: hidden;
}

.masonry {
   margin-bottom: 3rem;
}

.masonry:after {
   content: "";
   display: table;
   clear: both;
}

.masonry .grid-sizer, .masonry__brick {
   width: 292px;
}

.masonry__brick {
   float: left;
   padding: 0 15px;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * masonry layout
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1480px) {
   .masonry-wrap {
      width: 1080px;
   }

}

@media only screen and (max-width:1140px) {
   .masonry-wrap {
      width: 1020px;
   }

   .masonry .grid-sizer, .masonry .masonry__brick {
      width: 340px;
   }

}

@media only screen and (max-width:1060px) {
   .masonry-wrap {
      width: 740px;
   }

   .masonry .grid-sizer, .masonry .masonry__brick {
      width: 370px;
   }

}

@media only screen and (max-width:800px) {
   .masonry-wrap {
      max-width: 700px;
      width: 90%;
   }

   .masonry .grid-sizer, .masonry .masonry__brick {
      width: 50%;
      padding: 0 15px;
   }

}

@media only screen and (max-width:700px) {
   .masonry-wrap {
      max-width: 400px;
   }

   .masonry .grid-sizer, .masonry .masonry__brick {
      width: 100%;
      clear: both;
   }

}

@media only screen and (max-width:600px) {
   .masonry-wrap {
      width: auto;
   }

   .masonry .grid-sizer, .masonry .masonry__brick {
      padding: 0 10px;
   }

}

@media only screen and (max-width:400px) {
   .masonry .masonry__brick {
      width: 100% !important;
      float: none !important;
      clear: both !important;
      margin-left: 0;
      margin-right: 0;
      padding: 0;
   }

}