/* Three portrait cards in a row.

   .contact-team-grid and .functional-contact-grid are fixed at two columns
   in inner.css. A third card there wraps onto a second row and leaves an
   empty cell, which shows as a grey block because the grid paints its 1px
   rules with a background colour. .three-up gives those grids a third
   column instead.

   Kept out of inner.css on purpose: that file is linked by hundreds of
   pages and each would need its ?v= bumped. A new file only needs the
   pages that load it. */

.contact-team-grid.three-up,
.functional-contact-grid.three-up{grid-template-columns:repeat(3,minmax(0,1fr))}
/* inner.css caps .functional-contact-grid at 850px, which is sized for two
   cards; three need the room. */
.functional-contact-grid.three-up{max-width:1275px}

/* Three stays three all the way down to the single-column breakpoint. An
   intermediate two-column step would put the third card alone on a second
   row and bring back the empty grey cell this file exists to avoid. */
@media(max-width:680px){
  .contact-team-grid.three-up,
  .functional-contact-grid.three-up{grid-template-columns:1fr}
}