.prose {
  display: grid;
  grid-template-columns:
    1fr
    min(800px, calc(100% - var(--space-xl) * 2))
    1fr;
  grid-column-gap: var(--space-xl);

  --image-max-width: 1200px;
}

.prose > *,
.prose .no-bleed {
  grid-column: 2;
}

.prose .full-bleed {
  width: 100%;
  grid-column: 1 / -1;
  padding-inline: 0;
}

.prose a {
  text-indent: 0;
}

.prose p a,
.prose li a {
  position: relative;
  text-decoration: underline;
  text-decoration-color: var(--gray-8);
  text-underline-offset: 0.1em;
}

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  scroll-margin-top: var(--space-3xl);
  margin-bottom: var(--space-m);
}

.prose h1 a,
.prose h2 a,
.prose h3 a,
.prose h4 a,
.prose h5 a,
.prose h6 a {
  color: var(--gray-9);
  display: inline-block;
  margin-inline-start: 0.25em;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .prose h1 a:hover,
  .prose h2 a:hover,
  .prose h3 a:hover,
  .prose h4 a:hover,
  .prose h5 a:hover,
  .prose h6 a:hover {
    color: var(--gray-12);
  }
}

.prose h1 a svg,
.prose h2 a svg,
.prose h3 a svg,
.prose h4 a svg,
.prose h5 a svg,
.prose h6 a svg {
  width: 0.6em;
  height: 0.6em;
  margin-bottom: -0.05em;
}

@media (hover: hover) and (pointer: fine) {
  .prose p a:hover,
  .prose p a:focus,
  .prose li a:hover,
  .prose li a:focus {
    text-decoration-color: var(--gray-11);
  }
}

.prose h2 {
  margin-top: var(--space-2xl);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--space-xl);
}

.prose p + p {
  text-indent: 1.3em;
}

.prose * + ul,
.prose * + ol,
.prose * + blockquote {
  margin-top: var(--space-l);
}

.prose ul + p,
.prose ol + p,
.prose blockquote + p {
  margin-top: var(--space-l);
}

.prose ul,
.prose ol {
  list-style-type: none;
  padding-left: 1.3em;
  margin-bottom: 0;
}

.prose ul ul,
.prose ol ol {
  margin-top: 0;
}

.prose li {
  position: relative;
}

.prose li::before {
  position: absolute;
  width: 1.3em;
  left: -1.3em;
  color: var(--gray-11);
}

.prose ul li::before {
  font-family: var(--font-sans);
  content: "→";
  transform: scale(1) translateY(0.015em);
  transform-origin: left;
}

.prose ol li::before {
  font-family: var(--font-sans);
  content: counter(list-item);
  font-variant-numeric: tabular-nums;
}

.prose .expressive-code {
  border-radius: var(--radius-xs);
  margin-block: var(--space-l);
}

.prose .expressive-code .frame {
  box-shadow: none;
}

.prose :not(pre) code {
  background-color: var(--gray-3);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.2em;
  font-size: 0.95em;
  letter-spacing: var(--letter-spacing-condensed);
}

.prose abbr {
  border-bottom: none;
  text-decoration: dotted underline;
  text-decoration-color: var(--gray-7);
  text-underline-offset: 0.1em;
  position: relative;
  cursor: help;
}

.prose blockquote {
  border-left: 2px solid var(--gray-7);
  padding-left: var(--space-l);
  hanging-punctuation: first;
  margin-bottom: 0;
}

.prose blockquote cite {
  display: block;
  font-style: normal;
}

.prose blockquote cite::before {
  content: "—";
  color: var(--gray-11);
  margin-inline-end: var(--space-xs);
}

.prose sup,
.prose sub {
  font-family: var(--font-caption);
  vertical-align: baseline;
  position: relative;
  top: -0.3em;
}

.prose sub {
  top: 0.3em;
}

.prose > figure {
  margin-block-start: var(--space-2xl);
  margin-inline: auto;
  width: 100%;
  grid-column: 1 / -1;
}

.prose > figure + *:not(h2) {
  margin-block-start: var(--space-2xl);
}

.prose .two-up {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
}

.prose .two-up > * {
  flex: 1;
  max-width: calc((var(--image-max-width) - var(--space-m)) / 2);
}

.prose figure img {
  background: var(--gray-4);
}

.prose figure img,
.prose figure video,
.prose figure .two-up {
  width: 100%;
  max-width: var(--image-max-width);
  margin-inline: auto;
  border-radius: var(--radius-xs);
}

/* Hacky way to target the image container without an extra div */
.prose figure > p,
.prose .two-up > p,
.prose .video-wrapper {
  margin-inline: auto;
  max-width: var(--image-max-width);
  overflow: hidden;
  position: relative;
}

.prose figure > p::after,
.prose .two-up > p::after,
.prose .video-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.5px solid var(--gray-a6);
  border-radius: var(--radius-xs);
  pointer-events: none;
}

@media (width <= 1200px) {
  .prose figure:not(.no-bleed) img,
  .prose figure:not(.no-bleed) video,
  .prose figure:not(.no-bleed) .video-wrapper {
    border-radius: 0;
  }

  .prose .two-up > p::after,
  .prose figure:not(.no-bleed) > p::after,
  .prose figure:not(.no-bleed) .video-wrapper::after {
    border-radius: 0;
  }

  .prose figure:not(.no-bleed) > p::after,
  .prose figure:not(.no-bleed) .video-wrapper::after {
    border-right: none;
    border-left: none;
  }
}

.prose figcaption {
  font-size: var(--step--1);
  margin-block-start: var(--space-s);
  max-inline-size: min(800px, calc(100% - var(--space-xl) * 2));
  margin-inline: auto;
  display: flex;
  position: relative;
}

.prose .no-bleed figcaption {
  max-inline-size: 100%;
}

.prose .two-col {
  columns: 2;
  column-gap: var(--space-xl);
  margin-block: var(--space-xl);
}

@media (width < 400px) {
  .prose .two-col {
    columns: 1;
  }
}

.prose .two-col figure {
  break-inside: avoid;
  margin-block-end: var(--space-xl);
}

.prose hr {
  border: 0;
  margin-block: var(--space-2xl);
  text-align: center;

  &::before {
    content: "a0⁕ ⁕ ⁕";
  }
}
