*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: #fff;
}

body {
  margin: 0;
  padding: 0 clamp(16px, 4vw, 48px) clamp(16px, 4vw, 48px);
  background: #fff;
  color: #222;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header {
  padding: clamp(32px, 6vw, 72px) 0 clamp(24px, 4vw, 48px);
  text-align: center;
}

h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: lowercase;
}

#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(16px, 3vw, 40px);
  max-width: 1400px;
  margin: 0 auto;
}

/* Square cells with contain: artwork is never cropped, and the white
   letterbox blends into the page. */
#gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  /* Hidden until loaded, then faded in (gallery.js adds .loaded). */
  opacity: 0;
  transition: opacity 0.6s ease-in;
}

#gallery img.loaded {
  opacity: 1;
}