.masonry {
  column-count: 1;
  column-gap: 0;
  counter-reset: item-counter;
}
@include media-breakpoint-up(sm){
  .masonry {
    column-count: 2;
  }
}
@include media-breakpoint-up(md) {
  .masonry {
    column-count: 3;
  }
}
@include media-breakpoint-up(lg) {
  .masonry {
    column-count: 4;
  }
}
@include media-breakpoint-up(xl) {
  .masonry {
    column-count: 5;
  }
}

.masonry__item {
  column-break-inside: avoid; /* Chrome, Safari, Opera */
         break-inside: avoid; /* IE 10+ */
    page-break-inside: avoid; /* Firefox */
  padding: 10px;
  counter-increment: item-counter;
}