/* ----------------------------------------------------------
   The team (page "Team": the query's post template, class team-masonry) as in Figma ("Team Page"):
   three columns that each stack on their own, the photos at their own heights; two columns on
   tablets, one on phones. The grid and its columns per screen size are classes on the post template
   (display-grid, grid-template-columns-…, column-gap-g1); script.js places the cards, 60px apart
   (--team-masonry-gap); without it they sit in rows.
   ---------------------------------------------------------- */
.team-masonry {
  --team-masonry-gap: 60px;

  row-gap: var(--team-masonry-gap);
}

.team-masonry > * {
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* Placed by script.js for a number of columns (data-masonry): rows 1px high, each card in its
   column, spanning its height. Only while the screen has that many columns (the classes' 3 above
   1024px, 2 down to 569px): just after a change of screen size the cards stand in the plain grid
   until the script has placed them again, never in a column that is gone */
@container (min-width: 1025px) {
  .team-masonry[data-masonry="3"] {
    grid-auto-rows: 1px;
    row-gap: 0;
  }

  .team-masonry[data-masonry="3"] > * {
    grid-column: var(--masonry-column);
    grid-row: var(--masonry-row);
  }
}

@container (min-width: 569px) and (max-width: 1024px) {
  .team-masonry[data-masonry="2"] {
    grid-auto-rows: 1px;
    row-gap: 0;
  }

  .team-masonry[data-masonry="2"] > * {
    grid-column: var(--masonry-column);
    grid-row: var(--masonry-row);
  }
}