@layer components {
  .prose {
    font-size: var(--text-base);
    line-height: var(--line-base);
    color: var(--color-ink);
  }

  /* Vertical Flow */
  .prose > * + * { margin-block-start: var(--block-space); }
  .prose > :is(h1, h2, h3, h4, h5, h6) { margin-block-start: var(--block-space-double); }
  .prose > :first-child, .prose > header > :first-child { margin-block-start: 0; }

  .prose :is(h1, h2, h3, h4, h5, h6) { margin-block-end: var(--block-space-half); }
  .prose :is(p, ul, ol) { margin-block: var(--block-space-half); }

  /* Links */
  .prose a { text-decoration: underline; }

  /* Lists */
  .prose :is(ul, ol) { padding-inline-start: var(--inline-space-double); }
  .prose li { margin-block-end: 0.25rem; }

  /* Blockquote */
  .prose blockquote {
    border-inline-start: 0.25rem solid var(--color-accent);
    padding-inline-start: var(--inline-space);
    color: var(--color-ink-medium);
    font-style: italic;
  }

  /* Code & Pre */
  .prose :is(pre, code) {
    background-color: var(--surface-panel);
    border-radius: var(--radius-sm);
  }

  .prose pre {
    padding: var(--block-space);
    overflow-x: auto;
    font-size: var(--text-sm);
  }

  .prose code {
    padding: 0.125rem 0.25rem;
    font-size: 0.875em;
  }

  .prose pre code {
    background-color: transparent;
    padding: 0;
  }

  /* Media */
  .prose img {
    border-radius: var(--radius-md);
    margin-block: var(--block-space);
  }

  .prose figure {
    margin-block: var(--block-space-double);
  }

  .prose figure > img,
  .prose figure > picture > img {
    margin-block: 0;
  }

  .prose figcaption {
    margin-block-start: 0.5rem;
  }

  /* Cover Image - Full Width */
  .prose__cover-image {
    inline-size: calc(100% + (var(--main-padding) * 2));
    max-inline-size: calc(100% + (var(--main-padding) * 2));
    margin-inline: calc(var(--main-padding) * -1);
    margin-block: var(--block-space);
  }

  .prose__cover-image img {
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: 0;
    margin-block: 0;
    display: block;
  }

  @media (min-width: 768px) {
    .prose__cover-image {
      inline-size: 100%;
      max-inline-size: 100%;
      margin-inline: 0;
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    .prose__cover-image img {
      border-radius: var(--radius-lg);
    }
  }

  /* Meta */
  .prose__meta {
    display: block;
    margin-block-end: var(--block-space-double);
    color: var(--color-ink-light);
    font-size: var(--text-sm);
  }
}