/* lookbook page rules — see public/css/shared.css for tokens and primitives */

.lb-lookbook {
  padding-top: 60px;
}

.lb-title {
  margin: 0 0 44px;
  text-align: center;
}

.lb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* The source relied on the photos to size the rows; empty slots have no
     intrinsic height, so the track is sized explicitly instead. */
  grid-auto-rows: clamp(200px, 26vw, 420px);
  gap: 4px;
}

.lb-cell {
  width: 100%;
  height: 100%;
}

.lb-tall {
  grid-row: span 2;
}

@media (max-width: 900px) {
  .lb-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(200px, 38vw, 380px);
  }
}

@media (max-width: 560px) {
  .lb-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 68vw;
  }

  /* Row spans stop earning their keep in a single column. */
  .lb-tall {
    grid-row: span 1;
  }
}