.content {
  font-family: var(--font-body);
  font-size: var(--typo-size-responsive);

  & h2 {
    @mixin heading-2;
    @mixin pl var(--spacing-snug);
    @mixin border-l var(--size-4), solid, var(--el-h2-color);

    & + p,
    & + ul,
    & + ol,
    & + blockquote {
      margin-block: calc(1em * var(--typo-leading-normal) * var(--vspace-tight))
        calc(1em * var(--typo-leading-normal) * var(--vspace-snug));
    }

    & + h3 {
      margin-block: calc(1em * 1.125 * var(--vspace-compressed))
        calc(1em * 1.125 * var(--vspace-snug));
    }
  }

  & h3 {
    @mixin heading-3;
    @mixin py var(--spacing-tight);
    @mixin px var(--spacing-snug);

    color: var(--color-text-inverse);
    background: var(--color-surface-inverse);
  }

  & h4 {
    @mixin heading-4;
    @mixin py var(--spacing-tight);
    @mixin px var(--spacing-snug);
    @mixin border-t var(--size-3), solid, var(--el-h4-color);
    @mixin border-b var(--size-3), solid, var(--el-h4-color);

    color: var(--el-h4-color);
  }

  & h5 {
    @mixin heading-5;
    @mixin py var(--spacing-tight);
    @mixin px var(--spacing-snug);

    color: var(--el-h5-color);

    &::before,
    &::after {
      @mixin pr var(--spacing-tight);

      content: "";
      line-height: var(--typo-leading-compressed);
    }

    &::before {
      content: '▼';
    }
  }

  & h6 {
    @mixin heading-6;

    color: var(--el-h6-color);
  }
}
