/* Teamsiden: personerne står i et fast gitter, og alt står på linje i hver
   række, uanset skærm og browser.

   app.css lægger dem i en flex-række med space-between, så en sidste række
   med færre personer blev spredt ud over hele bredden. Kolonnebredderne er
   de samme som i app.css, så fulde rækker står præcis som før. */
.team_loop {
  display: grid;
  grid-template-columns: repeat(4, 21.2%);
  justify-content: space-between;
}

/* Alle portrætter i samme format (2:3). Nogle uploads er 429x600 i stedet
   for 400x600 og blev ellers lavere end de andre. object-fit: cover
   (app.css) beskærer kanterne en anelse. Samme regel som på
   sf-management.dk. */
.team_loop .team_block img {
  aspect-ratio: 1 / 1.5;
}

/* Browsere uden aspect-ratio (fx Safari før iOS 15): billedet lægges i en
   ramme, der er 1,5 gange så høj, som den er bred. */
@supports not (aspect-ratio: 1 / 1) {
  .team_loop .team_block picture {
    display: block;
    position: relative;
    height: 0;
    padding-top: 150%;
    overflow: hidden;
    margin-bottom: 19px;
  }

  .team_loop .team_block picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }
}

/* "Load More"-knappen (inc/vis-flere.php) fylder hele rækken */
.team_loop > .w-100 {
  grid-column: 1 / -1;
}

@media screen and (max-width: 1199px) {
  .team_loop {
    grid-template-columns: repeat(3, 30%);
  }
}

@media screen and (max-width: 767px) {
  .team_loop {
    grid-template-columns: repeat(2, 46%);
  }
}

/* Det længste navn (OHANNESSIAN) skal kunne stå i kolonnen på en telefon:
   18px som før ned til 450px skærmbredde, derunder 4vw (15,6px ved 390px).
   Skrevet uden min(), så ældre browsere også får det. */
@media screen and (max-width: 449px) {
  .team_loop .team_block .title_block h4 {
    font-size: 4vw;
  }
}