/* global */

header a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[aria-labelledby="contact"] address {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: repeat(3, max-content);
  row-gap: 24px;
  column-gap: 10px;
}
[aria-labelledby="contact"] address img { grid-column: 1 / span 1; }
[aria-labelledby="contact"] address img:not(:first-of-type) { align-self: center; }
[aria-labelledby="contact"] address :not(img) { grid-column: 2 / span 1; }

/* desktop only */
@media screen and (min-width: 900px) {
  header {
    display: grid;
    grid-template-columns: 450px;
    align-content: center;
    justify-content: center;
  }

  [aria-labelledby="history"] {
    display: grid;
    grid-template-rows: repeat(3, max-content) 1fr;
    grid-template-columns: minmax(auto, 701px) 307px;
    align-content: start;
    justify-content: center;
    column-gap: 32px;
  }
  [aria-labelledby="history"] figure {
    grid-row: 1 / span 4;
    grid-column: 2 / span 1;
  }

  [aria-labelledby="expertise"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(auto, 320px));
    justify-content: center;
    column-gap: 32px;
  }
  [aria-labelledby="expertise"] > :not(.card) { grid-column: 1 / span 3; }

  [aria-labelledby="contact"] {
    display: grid;
    grid-template-columns: 529px minmax(min-content, 467px);
    justify-content: center;
    column-gap: 44px;
  }
  [aria-labelledby="contact"] > img { grid-row: 1 / span 4; }
  [aria-labelledby="contact"] > :not(img) { grid-column: 2 / span 1; }
}

/* mobile only */
@media screen and (max-width: 899px) {
  header {
    display: grid;
    align-items: end;
    justify-items: center;
    gap: 50px;
  }
  header :is(h1, p, a) { grid-column: 1 / span 1; }
  header h1 { grid-row: 1 / span 1; }
  header :is(p, a) { grid-row: 2 / span 1; }
  header p { align-self: start; }
}