<div class="row">
  <ul id="gallery">
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://picsum.photos/200/140" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>
    </li>
  </ul>
</div>

/*
Forum question answer only:

https://www.sitepoint.com/community/t/how-to-proportionally-scale-an-image-grid/365465/2



*/

body {
  font-style: normal;
  background-color: #fff;
  font: 0.95em / 1.32em sans-serif;
  color: rgba(255, 255, 255, 1);
  font-family: Sans-serif;
}
.row {
  max-width: 1280px;
  margin: auto;
  background: #f9f9f9;
  padding: 1rem;
}
#gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style-type: none;
  align-items: center;
  gap: 2vw;
  background: rgba(204, 204, 204, 0);
}
#gallery {
  box-sizing: border-box;
}
#gallery * {
  box-sizing: inherit;
}

#gallery li {
  position: relative;
  flex: 1 0 20%;
  max-width: calc(20% - 2vw);
  background-color: rgba(210, 207, 207, 0);
  overflow: visible;
}
.h3 {
  font-size: 5em;
}
#gallery img {
  display: block;
  max-width: 140px;
  height: auto;
}
#gallery figcaption,
#gallery figure {
  display: block;
  margin: 6px;
  padding: 0;
}
#gallery figcaption {
  display: flex;
  flex-direction: column;
  justify-content: left;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 1px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1em;
  background-color: rgba(204, 204, 204, 0);
  color: #000;
  text-align: left;

  transition: 0.5s ease;
  pointer: events none;
}
#gallery li:hover figcaption {
  opacity: 1;
}
#gallery figure {
  display: flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}
#gallery li:hover figcaption2 {
  opacity: 1;
}
#gallery li img {
  width: 100% !important;
  max-width: none;
  height: auto !important;
  object-fit: cover;
}

@media screen and (max-width: 980px) {
  #gallery li {
    flex: 1 0 25%;
    max-width: calc(25% - 2vw);
  }
}
@media screen and (max-width: 768px) {
  #gallery li {
    flex: 1 0 33.3%;
    max-width: calc(33.3% - 2vw);
  }
}
@media screen and (max-width: 568px) {
  #gallery li {
    flex: 1 0 50%;
    max-width: calc(50% - 2vw);
  }
}
@media screen and (max-width: 468px) {
  #gallery li {
    flex: 1 0 100%;
    max-width: calc(100% - 2vw);
  }
}