<style type="text/css">
.masonry-w {
  padding: 1.6em;
  margin-right: auto;
  margin-left: auto;
}
.masonry {
  columns: 2 !important;
  column-gap: 15px;
}
.masonry-i {
  display: block;
  vertical-align: top;
  margin-bottom: 10px;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {  
    .masonry {
    columns: 2;
  }
}
@media only screen and (min-width: 1024px) {
  .masonry {
    columns: 2;
  }
}
.masonry-i, .masonry-c {
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  height: auto;
}
.masonry-i {
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, .4));
  transition: filter .25s ease-in-out;
}

</style>
<div class="masonry-w">
    <div class="masonry">
        <div class="masonry-i">
            <img alt="" class="masonry-c" src="http://www.epic-couture.com/images/quer.jpg" />
        </div>

        <div class="masonry-i">
            <img alt="" class="masonry-c" src="http://www.epic-couture.com/images/quer.jpg" />
        </div>

        <div class="masonry-i">
            <img alt="" class="masonry-c" src="http://www.epic-couture.com/images/hoch.jpg" />
        </div>

        <div class="masonry-i">
            <img alt="" class="masonry-c" src="http://www.epic-couture.com/images/hoch.jpg" />
        </div>

        <div class="masonry-i">
            <img alt="" class="masonry-c" src="http://www.epic-couture.com/images/quer.jpg" />
        </div>
    </div>
</div>