main>article {
  display: grid;

  grid-template-areas:
    "img head"
    "img content"
    "left content"
    "left lead"
    "left intro";

  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-items: start;
}

@media (max-width:639px) {
  main>article {
    grid-template-areas:
      "img  img"
      "left head"
      "left content"
      "left content"
      "left lead"
      "left intro";
  }


  main>article>.sidebar.left {
    padding-top: 6.3rem;
  }
}

@media (max-width:479px) {

  main>article {
    grid-template-areas:
      "img"
      "head"
      "left"
      "content"
      "lead"
      "intro";
  }

  main>article>.sidebar.left {
    padding-top: 0;
  }
}

main>article>header {
  grid-area: head;
  display: grid;
  grid-template-areas:
    "title title"
    "author published";

  grid-template-columns: auto 1fr;
  margin-bottom: 1rem;
}

@media (min-width:480) {
  main>article>header>h1 {
    margin-bottom: 0;
  }
}


main>article>header>h1 {
  grid-area: title;
  margin: 0;
}

main>article>header>.author {
  grid-area: author;
}

main>article>header>.author:after {
  content: "•";
  margin: 0 1rem;
}

main>article>header>.author>.title {
  display: none;
}

main>article>header>.published {
  grid-area: published;
}


main>article>header>.datetime>.title {
  display: none;
}

main>article>figure {
  grid-area: img;
  margin: 1rem auto 0;
  text-align: center;
  width: 300px;
  text-align: center;
}



main>article>.sidebar.left {
  grid-area: left;
}

main>article>.content {
  grid-area: content;
}

main>article>.lead {
  grid-area: lead;
}

main>article>.intro {
  grid-area: intro;
}