.gallery {
  width: 95%;
  margin: auto;
}

.thumbnail {
    width: 150px;
    height: 150px;
    overflow: hidden;
    display: inline-block;
    margin: 8px;
    cursor: pointer;
  }

.thumbnail:hover {
  border-bottom: 8px solid red;
  box-sizing: border-box;
  border-image-outset: 40px;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;    
}

/* On smaller screens */
@media only screen and (max-width: 420px) {
  .thumbnail {
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: inline-block;
    margin: 8px;
    cursor: pointer;
  }
}

/* On medium screens */
@media only screen and (min-width: 421px) and (max-width: 800px) {
  .thumbnail {
    width: 175px;
    height: 175px;
    overflow: hidden;
    display: inline-block;
    margin: 8px;
    cursor: pointer;
  }
}


/* On large screens */
@media only screen and (min-width: 800px) and (max-width: 1024px) {
  .thumbnail {
    width: 225px;
    height: 225px;
    overflow: hidden;
    display: inline-block;
    margin: 8px;
    cursor: pointer;
  }
}