main {
  display: grid;

  width: min(95%, 90rem);

  grid-template-columns: repeat(14, 1fr);

  grid-template-rows:
    [banner-start] var(--banner-grid-row-height) [banner-end] var(
      --name-grid-row-height
    )
    [blurb-start] max-content [blurb-end];

  transition: all ease-in-out 150ms;

  grid-template-areas:
    "gutter-left banner banner banner banner banner banner banner banner banner banner banner banner gutter-right"
    "gutter-left first first first first first first first last last last last last gutter-right"
    "gutter-left blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb gutter-right";

  grid-auto-flow: row;

  grid-auto-rows: max-content;
}

#gutter-left {
  grid-area: gutter-left;
}

#banner {
  grid-area: banner;

  display: flex;
}

#gutter-right {
  grid-area: gutter-right;
}

#alexander {
  grid-area: first;
  transition: all ease-in-out 150ms;
}

#litzow {
  grid-area: last;
  transition: all ease-in-out 150ms;
}

#blurb {
  grid-area: blurb;
}

.portfolio-item {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: var(--pi-description-grid-row-height) 1fr;
}

.portfolio-item .pi-description {
  grid-column: var(--pi-description-grid-column);
}

.portfolio-item .pi-example {
  grid-column: var(--pi-example-grid-column);
}

@keyframes footerFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

footer {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 10rem 5rem;

  grid-column: 1 / -1;

  opacity: 0;

  animation: footerFade 1s 10s forwards;
}

footer .dividers,
footer h4 {
  grid-column: 1 / -1;

  align-self: end;
  justify-self: center;
}

@media screen and (max-width: 90rem) {
  html {
    --large-font-size: 7rem;
    --name-grid-row-height: 8rem;
  }
}

@media screen and (max-width: 70rem) {
  html {
    --large-font-size: 7rem;
    --name-grid-row-height: 8rem;

    --banner-grid-row-height: 6rem;

    --pi-description-grid-column: 1 / -1;

    --blurb-font-size: 1.8rem;
  }

  main {
    grid-template-columns: repeat(12, 1fr);

    grid-template-areas:
      "banner banner banner banner banner banner banner banner banner banner banner banner"
      "first first first first first first first last last last last last"
      "blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb";
  }
}

@media screen and (max-width: 60rem) {
  html {
    --name-grid-row-height: 6.3rem;

    --banner-grid-row-height: 5.5rem;

    --border-size: 0.8rem;

    --large-font-size: 5rem;
    --small-font-size: 0.8rem;

    --headshot-size: 6rem;

    --blurb-font-size: 1.6rem;

    --headshot-margin-bottom: -3.3rem;

    --headshot-margin-bottom-hover: -2rem;

    --pi-description-margin: 0;
  }

  main {
    grid-template-columns: repeat(7, 1fr);

    grid-template-areas:
      "banner banner banner banner banner banner banner"
      "first first first first last last last"
      "blurb blurb blurb blurb blurb blurb blurb";
  }
}

@media screen and (max-width: 50rem) {
  html {
    --blurb-font-size: 1.8rem;

    --name-grid-row-height: 4.6rem;

    --banner-grid-row-height: 3rem;

    --border-size: 0.8rem;

    --large-font-size: 3rem;

    --headshot-size: 5rem;

    --blurb-font-size: 1.3rem;

    --headshot-margin-bottom: -2.8rem;

    --headshot-margin-bottom-hover: -1.3rem;
  }

  #blurb {
    padding: 2rem 0;
  }
}

@media screen and (max-width: 35rem) {
  html {
    --name-grid-row-height: 3.6rem;

    --border-size: 0.6rem;

    --large-font-size: 2.3rem;
  }
}