/* Masonry grid */
.masonry {
    transition: all .5s ease-in-out;
    column-gap: 15px;
    column-fill: initial;
  }
  
  /* Masonry item */
  .masonry .brick {
    margin-bottom: 15px;
    display: inline-block; /* Fix the misalignment of items */
    vertical-align: top; /* Keep the item on the very top */
  }
  
  /* Masonry image effects */
  .masonry .brick img {
    transition: all .5s ease-in-out;
    backface-visibility: hidden; /* Remove Image flickering on hover */
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  .masonry .brick:hover img {
    opacity: .75;
  }
  
  /* Bordered masonry */
  .masonry.bordered {
    column-rule: 1px solid #eee;
    column-gap: 50px;
  }
  
  .masonry.bordered .brick {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
  }
  
  /* Gutterless masonry */
  .masonry.gutterless {
    column-gap: 0;
  }
  
  .masonry.gutterless .brick {
    margin-bottom: 0;
  }
  
  /* Masonry on tablets */
  @media only screen and (min-width: 768px) and (max-width: 1023px) {
    .masonry {
      column-count: 3;
    }
  }
  
  /* Masonry on big screens */
  @media only screen and (min-width: 1024px) {
    .masonry {
      column-count: 4;
    }
  }
  @media screen and (max-width: 767px) {
    .masonry[data-columns]::before {
      content: '2 .col-xs-6';
    }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .masonry[data-columns]::before {
      content: '3 .col-xs-4';
    }
  }
  @media screen and (min-width: 992px) and (max-width: 1199px) {
    .masonry[data-columns]::before {
      content: '3 .col-xs-4';
    }
  }
  @media screen and (min-width: 1200px) {
    .masonry[data-columns]::before {
      content: '4 .col-xs-3';
    }
  }