/* Photo gallery */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.gallery a,
.gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  display: block;
  object-fit: cover; /* crops the image to fill the container */
  object-position: top; /* crops from the top for portrait images */
}

.photo {
  margin: 0;
}

/* Hover effect */
.photo:nth-child(odd):hover {
  transform: scale(1.05) rotate(2deg);
}

.photo:nth-child(even):hover {
  transform: scale(1.05) rotate(-2deg);
}

.photo-nav {
  margin-top: 3em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.photo-nav-next {
  text-align: right;
}

.photo-nav-prev {
  text-align: left;
}

.photo-nav-next:only-child {
  grid-column: 2;
}

.photo-nav-prev:only-child {
  grid-column: 1;
}

.gallery figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* Photo page */

.photo-page img {
  max-width: 100%;
  display: block;
  margin: 1rem 0;
  border-radius: 10px;
}