/* ==========================================================================
   Masonry styles
   ========================================================================== */

.l-masonry {
  column-count: 4;

  // Remove box-shadow break while using columns in CSS(Webkit bug)
  padding: @g-size-space-base/4;
  margin: -@g-size-space-base/4 -@g-size-space-base/4 0 -@g-size-space-base/4;
}

.l-masonry__item {
  width: 100%;
  break-inside: avoid;
  display: inline-block;

  margin-top: @g-size-space-base/4; // Remove box-shadow break while using columns in CSS(Webkit bug)
}

@media @g-media-query-widescreen {
  .l-masonry {
    column-count: 5;
  }
}

@media @g-media-query-desktop {
  .l-masonry {
    column-count: 3;
  }
}

@media @g-media-query-tablet {
  .l-masonry {
    column-count: 2;
  }
}

@media @g-media-query-phone {
  .l-masonry {
    column-count: 1;
  }
}

/* ==========================================================================
   Masonry styles
   ========================================================================== */

.l-masonry {
  column-count: 4;

  // Work around for webkit bug - https://bugs.webkit.org/show_bug.cgi?id=14137
  position: relative;
  &:after {
    content:'';
    display:block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: @g-color-grey-lighter;
  }
}

.l-masonry__item {
  width: 100%;
  break-inside: avoid;
}

@media @g-media-query-widescreen {
  .l-masonry {
    column-count: 5;
  }
}

@media @g-media-query-desktop {
  .l-masonry {
    column-count: 3;
  }
}

@media @g-media-query-tablet {
  .l-masonry {
    column-count: 2;
  }
}

@media @g-media-query-phone {
  .l-masonry {
    column-count: 1;
  }
}

Change workaround for webkit bug - 14137, due to new bug in chrome 53
Change workaround for webkit bug - 14137, due to new bug in chrome 53
