.history { background-color: #FFF; }

.leadership { background-color: #FFF; }

.leadership .staff-wrapper {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(161px, (100% - 2 * 32px) / 3), 1fr)
  );
  column-gap: 32px;
}

.leadership .staff {
  display: flex;
  flex-direction: column;
}

.leadership .staff > * { align-self: center; }

.leadership .staff img {
  margin-bottom: 12px;
  border-radius: 50%;
}

.leadership .staff span {
  max-width: max-content;
  text-align: center;
}

.leadership .staff .name {
  margin-bottom: 8px;

  color: var(--dark-gray);
  font-size: 20px;
  font-weight: 600;
}

.leadership .staff .role {
  color: var(--gray);
  font-size: 16px;
  letter-spacing: 0%;
  line-height: 1.5;
}

/* desktop only */

@media screen and (min-width: 900px) {
  figure img { margin-bottom: 8px; }

  .hero { background-image: url(/img/about-hero-desk.avif); }

  .history .wrapper {
    display: grid;
    grid-template-columns: repeat(2, min((100% - 24px) / 2, 508px));
    gap: 38px 24px;
  }
  .history h3 { margin: 0; }
  .history .wrapper > :not(figure) { grid-column: 1 / -1; }
  .history .wrapper figure { grid-row: 3 / span 1; }

  .section:not(.history) h3 { margin-bottom: 16px; }
  .section:not(.history) hgroup { margin-bottom: 40px; }

  .drive .card-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
  .drive .card { max-width: calc((100% - 48px) / 3); }

  .leadership .staff-wrapper { row-gap: 52px; }

  .team .wrapper {
    display: grid;
    grid-template-columns: repeat(2, min((100% - 32px) / 2, 504px));
    column-gap: 32px;
  }
  .team .wrapper > :not(img) { grid-column: 1 / span 1; }
  .team .wrapper > img {
    grid-column: 2 / span 1;
    grid-row: 1 / span 5;
  }
  .team .action-button {
    justify-self: start;
    margin-top: 64px;
  }
}

/* mobile only */

@media screen and (max-width: 899px) {
  figure img { margin-bottom: 10px; }

  .hero { background-image: url(/img/about-hero-mob.avif); }

  .history .wrapper > :not(h3, :last-child),
  .section:not(.history) p:not(:last-child) {
    margin-bottom: 28px;
  }

  .history h3 { margin-bottom: 20px; }

  .section:not(.history) h3 { margin-bottom: 16px; }

  .drive .card:not(:last-of-type) { margin-bottom: 24px; }

  .leadership .staff-wrapper { row-gap: 46px; }

  .team img {
    width: 100%;
    margin-top: 40px;
  }
}