.photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  line-height: 0;

  @media screen and (min-width: 100ch) {
    grid-template-columns: repeat(4, 1fr);
  }

  .photo {
    img { width: 100%; }
    img.thumbnail { border-radius: 0 }
  }
}

.photo {
  p {
    font-size: 1.2rem;
  }

  img {
    border-radius: 0.25rem;
  }

  figcaption {
    margin-top: 0.5rem;
    padding: 1rem;
    background-color: var(--dim-background-color);
    border-radius: 0.25rem;
    color: var(--dim-text-color);
    font-family: var(--sans-serif);
    font-size: 0.8rem;
    text-align: center;
    text-shadow: 1px 1px white;
    text-transform: uppercase;
  }
}