/* Box-sizing reset: //w3bits.com/?p=3225 */
html {
  box-sizing: content-box;
}

img {
  max-width: 100%;
  height: auto;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* The Masonry Container */
.masonry {
  /* margin: 1.5em auto; */
  margin: 0 auto;
  max-width: 90%;
  column-gap: 1em;
}

/* The Masonry Brick */
.item {
  width: inherit;
  padding: 1em;
  /* margin: 0 0 1.5em; */
  box-sizing: content-box;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Masonry on large screens */
@media only screen and (min-width: 1024px) {
  .masonry {
    column-count: 4;
  }
}

/* Masonry on medium-sized screens */
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}

/* Masonry on small screens */
@media only screen and (max-width: 767px) and (min-width: 540px) {
  .masonry {
    column-count: 2;
  }
}