.square-gallery {
  --numcolumns: 1;
  --gap: 1.3125rem;

  display: grid;
  grid-template-columns: repeat(var(--numcolumns), 1fr);
  gap: var(--gap);

  width: 100%; /* Firefox does not know fit-content */
}
@media (min-width: 600px) {
  .square-gallery {
    --numcolumns: 2;
  }
}
@media (min-width: 800px) {
  .square-gallery {
    --numcolumns: 3;
    --gap: 2.625rem;
  }
}
@media (min-width: 1170px) {
  .square-gallery {
    --numcolumns: 4;
  }
}
.square-gallery > a,
.square-gallery > div,
.square-gallery > figure {
  display: block;
  position: relative;
}
.square-gallery > a > img,
.square-gallery > div > img,
.square-gallery > figure > img,
.square-gallery > a > a > img,
.square-gallery > div > a > img,
.square-gallery > figure > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

/* Caption */
.square-gallery > a > .caption,
.square-gallery > div > .caption,
.square-gallery > figure > .caption {
  display: none;
  position: absolute;
  bottom: 0;
  padding: 5px;
  background-color: #000000;
  left: 0;
  right: 0;
  margin: 0;
  color: white;
  font-size: 12px;
  font-weight: 300;
  font-family: sans-serif;
}
.square-gallery > a:hover > .caption,
.square-gallery > a:focus > .caption,
.square-gallery > div:hover > .caption,
.square-gallery > div:focus > .caption,
.square-gallery > figure:hover > .caption,
.square-gallery > figure:focus > .caption {
  display: initial;
  filter: "alpha(opacity=70)";
  opacity: 0.7;
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  -o-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in;
}