/* Set value for flow compositions --flow-space */
.prose {
  --flow-space: var(--space-m);
}

/* Prevent text blow-outs by hyphenating words too long and wrapping when
  necessary */
.prose :is(h1, h2, h3) {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Make paragraphs more reasonable by setting a default measure and
  wrapping accordingly */
.prose :is(p, li, dl, figcaption, blockquote) {
  max-inline-size: var(--measure, var(--measure-l));
  text-wrap: pretty;
}

/* Make content look like it's a section by reducing --flow-space for any
  element that follows a heading and doesn't have a class */
.prose :is(h1, h2, h3, h4) + *:not([class]) {
  --flow-space: var(--space-s);
}

/* Add more space on and around figures and tables */
.prose :is(figure, table),
.prose :is(figure, table) + * {
  --flow-space: var(--space-xl);
}

/* Make content look like it's a section by adding more space to headings
  on block start */
.prose * + :is(h1, h2, h3, h4):not([class]) {
  --flow-space: var(--space-l);
}

/* Make lists and sublists closer (higher) to content by reducing flow-space */
.prose :is(ul, ol):not([class]) li + li,
.prose :is(ul, ol):not([class]) li > :is(ol, ul) {
  --flow-space: var(--space-xs);
}

/* Make thematic breaks the most common measure size by default and adjust as
  necessary using utility classes to set the --measure */
.prose hr {
  max-inline-size: var(--measure, var(--measure-l));
  --flow-space: var(--space-xl);
  margin-inline-start: 0;
  margin-inline-end: 0;
}