.wrapper {
  margin: 0 auto;
  width: 80%;
  text-align: center;
}

/* Limit image width to avoid overflow the container */
img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}

.image-gallery {
  margin: 0 auto;
  display: table;
}

.image,
.thumbnails {
  display: table-cell;
}

.thumbnails {
  width: 110px;

}

.image {
  width: 600px;
  height: 400px;
  background-color: #cccccc;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.thumbnail:hover .thumbnail-image, .selected .thumbnail-image {
    border: 4px solid #223a56;
}

.thumbnail-image {
  width: 100px;
  height: 100px;
  margin: 20px auto;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border: 4px solid transparent;
}