.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: .3em;
  grid-auto-flow: dense;
}
.photo-grid > figure {
  display: flex;
  flex-direction: column;
  margin: 0;
  position: relative;
}
.photo-grid > figure:focus-visible {
  outline-offset: 0;
}

.landscape {
  grid-column: span 2;
}
.portrait {
  grid-row: span 2;
}

.photo-grid img {
  cursor: pointer;
  filter: brightness(80%);
  flex: 1;
  max-width: 100%;
  object-fit: cover;
  transition: filter 160ms linear;
}
.photo-grid img:hover {
  filter: brightness(100%);
  transition: filter 80ms linear;
}

.photo-grid figcaption {
  font-size: .8rem;
  opacity: .8;
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 100%;
}