h3 { margin-bottom: 16px; }
hgroup { margin-bottom: 28px; }
.home-hero {
  height: calc(100dvh - var(--navbar-height));

  background-color: var(--blue);
  background-position: center;
  background-size: cover;

  p {
    color: #FFF;
    letter-spacing: 0.5%;
    line-height: 1.5;
    text-align: center;
  }
}
.work .action-button {
  background-color: var(--blue);

  color: #FFF;
}
.accountability {
  background-color: #FFF;

  ul {
    display: grid;
    gap: 24px 10px;

    padding-left: 0;
    margin-bottom: 32px;
  }
  li {
    grid-column-end: span 2;

    display: grid;
    grid-template-columns: subgrid;
  }
  li img { margin-top: 3px; }

  .action-button { margin-bottom: 40px; }
}
.history {
  background-size: cover;

  .wrapper {
    display: block;

    background-color: #FFF;
  }

  figure { margin-bottom: 28px; }
  figure img { aspect-ratio: 1.5; }

  p:nth-of-type(2) { margin-bottom: 36px; }

  .action-button {
    background-color: var(--blue);

    color: #FFF;
  }
}
.contact { background-color: var(--silver); }
.contact .card-wrapper {
  display: grid;
}
/* desktop only */
@media screen and (min-width: 900px) {
  .home-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-image: url(/img/home-hero-desk.avif);
  }
  .home-hero img {
    width: 400px;
    margin-bottom: 39px;
  }
  .home-hero p {
    margin-bottom: 29px;

    font-size: 16px;
  }

  .work hgroup { margin-bottom: 32px; }
  .work .card-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;

    margin-bottom: 40px;
  }
  .work .photo-card {
    flex-direction: column;

    margin: 0;
  }
  .work .photo-card .photo {
    inline-size: 100%;
    aspect-ratio: 1.5;
    max-inline-size: none;
  }
  .work .photo-card div {
    border-top: 4px solid var(--green);
    border-left: 0;
  }

  .accountability ul {
    grid-template-columns: repeat(2, 24px 1fr);
  }
  .accountability .action-button { margin-left: auto; margin-right: auto; }

  .history { background-image: url(/img/our-history-bg-desk.avif); }
  .history .wrapper { padding: 40px 48px; }
  .history figure {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 16px;
  }
  .history figure figcaption {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .history p:nth-of-type(3) { margin-bottom: 32px; }
  .history .action-button { margin: 0 auto; }

  .contact .wrapper > :not(div) { text-align: center; }
  .contact .card-wrapper {
    /* temp */
    justify-items: center;

    /* grid-template-columns: repeat(2, 1fr);
    gap: 28px; */
  }
  .contact .card {
    /* temp */
    width: calc((100% - 28px) / 2);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .contact .card p { flex-grow: 1; }
  .contact .card .action-button {
    justify-content: center;

    width: 100%;
  }
}
/* mobile only */
@media screen and (max-width: 899px) {
  .home-hero {
    display: grid;
    grid-template-rows: max-content 1fr repeat(2, max-content);
    row-gap: 24px;

    padding: 48px 24px 32px;

    background-image: url(/img/home-hero-mob.avif);
  }
  .home-hero p {
    grid-row: 3 / span 1;

    font-size: 14px;
  }
  .home-hero .button { grid-row: 4 / span 1; }

  .work .card-wrapper { margin-bottom: 32px; }

  .accountability .action-button { padding: 0 22px; }

  .history { background-image: url(/img/our-history-bg-mob.avif); }
  .history .wrapper { padding: 32px 24px; }
  .history figure img:not(:first-child) { margin-top: 12px; }
  .history figure figcaption { margin-top: 8px; }
  .history p:nth-of-type(3) { margin-bottom: 28px; }

  /* .contact .card-wrapper {
    grid-template-rows: repeat(2, 1fr);
    gap: 32px;
  } */
  .contact .card p {
    margin-bottom: 32px;
  }
}