/* ---------------------------------------------------------------------------
   Lock the person grid to exactly three columns on desktop.

   Material's default rule is:
     .md-typeset .grid {
       grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
     }
   which fits as many >=16rem columns as the container allows. On a wide screen
   that can be four or five, which is why the count has to be pinned.
   --------------------------------------------------------------------------- */

@media screen and (min-width: 60em) {
  .md-typeset .grid.cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   Give every person photo the same footprint so cards line up.
   --------------------------------------------------------------------------- */

.md-typeset .grid.cards .person-photo {
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  width: 100%;
}