/* https://www.taniarascia.com/how-to-build-a-responsive-image-gallery-with-flexbox/ */
.container {
  width: 500px;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.flex-item
{
  width: calc(100% / 4); /* how many rows? */
  padding:15px;
  box-sizing: border-box;
}

.thumbnailImg {
  max-width: 100%;
  background: white;
  display: block;
}

.thumbnailBox
{
  box-shadow:2px 2px 9px 0px rgba(0, 0, 0, 0.31);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #666666;
}

@media screen and (max-width: 800px)
{
  .flex-item
  {
    width: calc(100% / 2); /* how many rows? */
  }
}


@media screen and (max-width: 600px)
{
  .flex-item
  {
    /* width: calc(100% / 1); how many rows? */
  }
}