/*****************************************
***  About LJP — page layout            ***
***  Loads after cards.css and reuses   ***
***  .gear-card / .gear-photo from it.  ***
*****************************************/

.about-grid {
  width: 90vw;
  margin: 0 auto 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  text-align: left;
}

.about-grid .gear-photo {
  margin: 0;
}

/* attribution beneath the pull quote */
.about-attrib {
  margin-top: .7rem;
  font-style: normal;
  opacity: .85;
  font-size: .92em;
}

@media (min-width: 1080px) {

  /* Same footprint and column count as the old .center-container: 6 tracks,
     30px gutters, 75vw wide, dense packing. The one change is the row sizing
     — minmax(200px, auto) instead of a flat 200px, so a block keeps its
     original height but can grow rather than spilling its text. */
  .about-grid {
    width: 75vw;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(200px, auto);
    grid-auto-flow: dense;
    gap: 30px;
  }

  .ab-w2 {
    grid-column: span 2;
  }

  .ab-w3 {
    grid-column: span 3;
  }

  .ab-w4 {
    grid-column: span 4;
  }

  .ab-h1 {
    grid-row: span 1;
  }

  .ab-h2 {
    grid-row: span 2;
  }

  .ab-h3 {
    grid-row: span 3;
  }

  /* photos fill whatever block the grid gives them */
  .about-grid .gear-photo img {
    height: 100%;
    min-height: 200px;
  }
}