#my-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

#my-gallery a {
  /* --ar is the image's aspect ratio, set per-photo by build.sh.

     Width comes from flex, height from aspect-ratio — never hardcoded. Within
     a row every tile grows in proportion to --ar, so they all land on the same
     height while each keeps its own shape: justified rows, no cropping. The
     250px below is the minimum row height, not a fixed one. */
  flex-grow: var(--ar, 1.5);
  flex-basis: calc(var(--ar, 1.5) * 250px);
  aspect-ratio: var(--ar, 1.5);
}

/* Soaks up the leftover width on the final row, so a row that is half empty
   leaves its photos at 250px instead of blowing them up to fill the page. */
#my-gallery::after {
  content: '';
  flex-grow: 999999;
  flex-basis: 0;
}

#my-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 480px) {
  #my-gallery {
    gap: 16px 8px; /* row-gap: 16px, column-gap: 8px */
  }
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
}

header h1 {
  font-family: 'Black Ops One', sans-serif;
}

@media (max-width: 480px) {
  header h1 {
    font-size: 1.1rem;
  }
}

header nav a {
  margin-left: 24px;
  font-size: 0.9rem;
}

body {
  font-family: 'Noto Sans', sans-serif;
}

.nav-link {
  text-decoration: none;
  color: inherit;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.nav-link.active {
  border-bottom: 2px solid black;
}