main.page,
main.single {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "featured"
    "title"
    "content"
    "footer";
}

main.page>img,
main.single>img {
  grid-area: featured;
  aspect-ratio: initial;
  width: 100%;
  height: auto;
  max-height: 60vh;
  max-width: 160em;
  object-fit: contain;
  align-self: center;
  justify-self: center;
  padding: 0;
  margin: 0;
  page-break-inside: avoid;
  break-inside: avoid;
}

main.page>h1,
main.single>h1 {
  grid-area: title;
}

main.page>section,
main.single>section {
  grid-area: content;
  column-width: var(--column-width);
  column-gap: var(--padding);
}

main.page>aside,
main.single>aside {
  grid-area: sidebar;
}

main.page>section>article>aside,
main.single>section>article>aside {
  float: right;
  width: 20%;
  min-width: min(30em, 50%);
  max-width: 50%;
  padding-right: var(--padding);
}

main.page>section>article>aside img,
main.single>section>article>aside img {
  float: none;
  width: 100%;
  height: auto;
}

footer {
  clear: both;
}