.post-single {
  padding-block: clamp(3rem, 5vw, 8rem);
}

.post-single h1 {
  font-size: clamp(1.85rem, 5vw, 2.75rem);
  margin-bottom: .35em;
}

.metadata {
  font-size: clamp(.75rem, 2vw, .9rem);
  color: hsl(from var(--color-theme-primary) h s calc(l - 15));
  line-height: 1.55;
  list-style: none;
  padding: 0;
  max-width: 42rem;
}

.metadata > li::before {
  pointer-events: none;
  content: "// ";
  display: inline;
}

#article {
  display: grid;
  grid-template-columns: 1fr [wide-content-start] 1fr [normal-content-start] minmax(0, 50rem) [normal-content-end] 1fr [wide-content-end] 1fr;
  row-gap: 1.25rem;
  padding-top: clamp(1.5rem, 5vw, 4rem);
  margin-top: clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid hsl(from var(--color-theme-primary) h s calc(l - 15) / 25%);
}

#article > * {
  grid-column: normal-content-start / normal-content-end;
}

:where(header[role="banner"], main[role="main"]) {
  padding-inline: .5rem;
}

#featured-image {
  display: block;
  margin-bottom: 1.25rem;
}

#featured-image img {
  aspect-ratio: 1 / .67;
  object-fit: cover;
  object-position: center;
  opacity: .8;
  transition: opacity 250ms ease-in-out;
}

#featured-image figcaption {
  font-size: .85rem;
  padding: 1em;
  opacity: .78;
  font-weight: 300;
  transition: opacity 250ms ease-in-out;
}

#featured-image:hover :where(figcaption, img) {
  opacity: 1;
}

@media all and (min-width: 48rem) {
  :where(header[role="banner"], main[role="main"]) {
    display: grid;
    grid-template-columns: 1fr [content-start] minmax(0, 92rem) [content-end] 1fr;
  }

  :where(header[role="banner"], main[role="main"]) > * {
    grid-column: content-start / content-end;
  }

  .metadata {
    column-count: 2;
  }

  .aside-box {
    border: 1px solid hsl(from var(--color-theme-primary) h s calc(l - 15) / 25%);
    color: hsl(from var(--color-theme-primary) h s calc(l - 21));
    transition: color 250ms ease-in-out, border-color 250ms ease-in-out;
  }

  .aside-box:hover {
    color: hsl(from var(--color-theme-primary) h s calc(l - 5));
    border-color: hsl(from var(--color-theme-primary) h s calc(l - 15) / 80%);
  }
}