/* Outer container, our flex container */
.gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}  

/* Our flex items, change width based on screen size */
.gallery a {
  width: 33.3%;
  text-decoration: none;
}
@media only screen and (max-width: 700px) {
  .gallery a {
    width: 49.99999%;
  }
}
@media only screen and (max-width: 500px) {
  .gallery a {
    width: 100%;
  }
}

/* Container for image and label, change color on hover */
div.imagegallery {
  margin: 6px 6px;
  border: 2px solid #6c6f85;
  color: #eff1f5;
  background-color: #df8e1d;
}
div.imagegallery:hover {
  color: #eff1f5;
  background-color: #40a02b;
  border: 2px solid black;
  transition: 0.2s;
}

/* Image/video content */
div.imagegallery img {
  width: 100%;
  height: auto;
}
div.imagegallery video {
  width: 100%;
  height: auto;
}

/* Description box, change on hover */
div.gallerydesc {
  padding: 15px;
  text-align: center;
  transition: 0.2s;
  color: #eff1f5;
  background-color: #9ca0b0;
}
div.gallerydesc:hover {
  color: #eff1f5;
  background-color: #df8e1d;
}
div.imagegallery:hover div.gallerydesc {
  color: #eff1f5;
  background-color: #df8e1d;
}

/* This is required for some reason. */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}