{#
  Editorial case study text: headings in a narrow left column, body in the right column (lg+).
  Variables:
  - content: rich text HTML (required)
  - class: optional extra classes on the wrapper
#}
<div
    class="rich-text grid w-full max-w-none grid-cols-1 gap-y-s lg:grid-cols-[11rem_minmax(0,1fr)] lg:items-start lg:gap-x-2xl lg:gap-y-l [&_*+h2]:col-span-full [&_*+h2]:mt-xl [&_*+h2]:border-t [&_*+h2]:border-navy/15 [&_*+h2]:pt-s [&_*+h3]:col-span-full [&_*+h3]:mt-xl [&_*+h3]:border-t [&_*+h3]:border-navy/15 [&_*+h3]:pt-s [&_*+h4]:col-span-full [&_*+h4]:mt-xl [&_*+h4]:border-t [&_*+h4]:border-navy/15 [&_*+h4]:pt-s [&_blockquote]:lg:col-start-2 [&_blockquote]:lg:max-w-[800px] [&_figure]:lg:col-start-2 [&_figure]:lg:max-w-[800px] [&_h2]:self-start [&_h3]:self-start [&_h4]:self-start [&_h5]:self-start [&_h6]:self-start [&_ol]:lg:col-start-2 [&_ol]:lg:max-w-[800px] [&_p]:lg:col-start-2 [&_p]:lg:max-w-[800px] [&_ul]:lg:col-start-2 [&_ul]:lg:max-w-[800px] {{ class ?? '' }}">
    {{ content }}
</div>