body {
  background: WhiteSmoke;
  color: Black;
  display: grid;
  grid-template-columns: 67% 33%;
  grid-row-gap: 1.6em;
  grid-column-gap: 2vw;
  grid-template-areas:
    "deck     ."
    "bio      photo"
    "socials  socials";

  position: static;
  padding: 8vw 17vw 1.2em 17vw;
  font-family: 'Cormorant Garamond', serif;
  font-size: calc(1em + 0.2vw);
  line-height: 1.1em;
  text-align: left;
}

h {
  color: Maroon;
  font-size: calc(1.2em + 0.2vw);
}

p + p {
  margin-top: 1.2em;
}

a[href] {
  text-decoration: none;
  color: Maroon;
}

@media only screen and (max-width: 768px) {
  body {
    padding: 6vw 8vw 6vw 8vw;
    font-size: 1.2em;
    grid-template-columns: 100%;
    grid-template-areas:
      "deck"
      "photo"
      "bio"
      "socials"
    }
}

.socials {
  grid-area: socials;
  font-size: 1.4em;
}

.social {
  opacity: 0.9;
}

.social:hover {
  opacity: 1.0;
}

.deck {
  grid-area: deck;
}

.bio {
  grid-area: bio;
}

img {
  grid-area: photo;
  max-width: 100%;
}