body {
  background: rgb(247, 247, 243);
  font-family: "Arial", sans-serif;
}
.gallery {
  position: relative;
  height: 800px;
}
.gallery:hover .thumb {
  opacity: 0.7;
}

.content-box {
  columns: 3 auto;
}
.text {
  margin-left: 10%;
  margin-right: 10%;
  font: 87.5%/1.4 Georgia, "Times New Roman", Times, serif;
}

.img_top {
  float: right;
  margin-top: 0.5%;
  margin-bottom: 2%;
  margin-left: 3%;
  margin-right: 5%;
}

.thumb {
  height: 45px;
  width: 45px;
  background: no-repeat center center;
  background-size: contain;
  transition: opacity 60ms;
  margin-left: 50px;
}
.gallery .thumb:hover {
  opacity: 1; /* overrides blur, so active img is not blurred */
}

.rt-container {
  margin: 0 auto;
  padding-left: 100px;
  padding-right: 100px;
}

.thumb:before,
.thumb:after {
  opacity: 0;
  width: 45%;
}
.thumb:last-of-type:before,
.thumb:last-of-type:after {
  opacity: 0;
}
.thumb:hover:before,
.thumb:hover:after {
  z-index: 100; /* so this image stays on top */
  opacity: 1;
}
/* this is the full-size image  */
.thumb:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 25%;
  height: 70%;
  padding-left: 1px; /* creates gap */
  padding-right: 90px;
  background: inherit;
  background-position: 1px center; /* moves the image slightly right so there's a gap between thumbnails and full-size */
}
/* this is the caption */
.thumb:after {
  content: attr(data-caption);
  position: absolute;
  top: 13px;
  right: 26%;
  height: 1em;
  padding-bottom: 0.1em;
  text-align: center;
  font-size: 0.8rem;
  font-family: "Times New Roman", serif;
  font-style: italic;
  color: gray;
}

/*
* CSS below sets src of each image
* could also be applied inline with HTML if needed to be dynamic
*/
.thumb.one {
  background-image: url(04_dirt_2.jpg);
}
.thumb.two {
  background-image: url(05_piano1.jpg);
}
.thumb.three {
  background-image: url(06_piano2.jpg);
}
.thumb.four {
  background-image: url(07_missinghome.jpg);
}
.thumb.five {
  background-image: url(08_oldsocks1.jpg);
}
.thumb.six {
  background-image: url(09_oldsocks2.jpg);
}
.thumb.seven {
  background-image: url(12_firework.jpg);
}
.thumb.eight {
  background-image: url(13_noodle.jpg);
}
.thumb.nine {
  background-image: url(14_rottenbook1.jpg);
}
.thumb.ten {
  background-image: url(15_rottenbook2.jpg);
}
.thumb.eleven {
  background-image: url(16_bike.jpg);
}
.thumb.twelve {
  background-image: url(17_swim.jpg);
}
.thumb.thirteen {
  background-image: url(18_party.jpg);
}