/*  

xsmall         only screen and (max-width: 20em)                                   1px - 320px
small          only screen and (max-width: 40em)                                   1px - 640px
medium         only screen and (min-width: 40.063em) and (max-width: 64em)         641px-1024px
large          only screen and (min-width: 64.063em) and (max-width: 90em)         1025px-1440px
xlarge         only screen and (min-width: 90.063em) and (max-width: 120em)        1441px-1920px
xxlarge        only screen and (min-width: 120.063em)                              1921px ....

*/


/* small ONLY    ... 640px    */
@media only screen and (max-width: 40em) {
.masonry-layout {
  column-count: 1;
  -webkit-column-count: 1;
  column-gap: 0;
  -webkit-column-gap: 0;
  }
}

/* medium ONLY      ... 1024px */
@media only screen and (min-width: 40.063em) and (max-width: 64em){
.masonry-layout {
  column-count: 2;
  -webkit-column-count: 2;
  column-gap: 0;
  -webkit-column-gap: 0;
  }
}
/* large AND UP      1025px ...    */
@media only screen and (min-width: 64.063em) { 
.masonry-layout {
  column-count: 3;
  -webkit-column-count: 3;
  column-gap: 0;
  -webkit-column-gap: 0;
  }
} 

.masonry-layout__panel {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
padding: 5px;
}
.masonry-layout__panel-content {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
padding: 5px;
}

.masonry-layout__panel-content {
  padding: 10px;
  border-radius: 10px;
}
.bg--red {
  background-color: #E74C3C;
}
.bg--green {
  background-color: #26A65B;
}
.bg--purple {
  background-color: #8E44AD;
}
.bg--orange {
  background-color: #F89406;
}




/* FLEXBOX 2 
.masonry-layout-panel--small {height: 200px;}
.masonry-layout-panel--medium {height: 300px;}
.masonry-layout-panel--large {height: 400px;}
*/

/* FLEXBOX 1 */
/*.masonry-layout {
  display: flex;
  flex-direction: column;
  padding: 10px;
  height: 100vw;
  flex-wrap: wrap;
}
.masonry-layout__panel {
  display: flex;
  width: 33.3%;
  flex: 1 1 auto;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 5px;
}*/