/**
 * RESET
 * Reference: http://meyerweb.com/eric/tools/css/reset/
 */

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

code, pre, samp {
  font-family: monospace;
}

/**
 * BASIC TYPE
 */

img, video {
  max-width: 100%;
  vertical-align: middle;
}

p:not(:last-child) {
  margin: 0 0 1em;
}



/**
 * BOX HACKING
 */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}
.wrapper { 
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  padding: 1.5em;
}

.masonry-wrapper {
  padding: 1.5em;
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
	text-align: center;
}
.masonry {
  display: grid;
  grid-template-columns: repeat(1, minmax(100px,1fr));
  grid-gap: 10px;
  grid-auto-rows: 0;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .masonry {
    grid-template-columns: repeat(2, minmax(100px,1fr));
  }
}
@media only screen and (min-width: 1024px) {
  .masonry {
    grid-template-columns: repeat(3, minmax(100px,1fr));
  }
}