/* The optional description, at the same reading width as page intros. */
.album-text {
  max-width: 40rem;
  margin-bottom: 3rem;
}
/*
  The gallery spans the whole page frame like the album grid on the
  Valokuvat page: one column on phones, two on tablets, three on wide
  screens.
*/
.album-gallery {
  line-height: 0;
  columns: 1;
  column-gap: 1.5rem;
}
.album-gallery li {
  display: block;
  margin-bottom: 1.5rem;
  break-inside: avoid;
}
@media screen and (min-width: 45rem) {
  .album-gallery {
    columns: 2;
  }
}
@media screen and (min-width: 60rem) {
  .album-gallery {
    columns: 3;
  }
}

/*
  Thumbnails brighten a touch on hover and get a visible ring on
  keyboard focus, so it's clear each one opens the lightbox.
*/
.album-gallery a {
  display: block;
}
.album-gallery img {
  transition: filter .3s ease;
}
.album-gallery a:hover img {
  filter: brightness(1.08);
}
.album-gallery a:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}