{{#
/**
 * @name top-level/focal-section
 * @todo Document property vars/partial
 */
#}}
<section class="px-5 bg-{{ bg-color }} py-11 l--py-12">
  <div class="mw-32 m--mw-grid mx-auto m--grid m--g-cols m--gap-m m--ai-center l--my-11">
    <div class="relative m--g-col-6 m--h-100 {{ if reversed }} m--order-2 m--left-0{{ /if }}">
      {{ asset:image }}
      <img src="{{ url }}" alt="{{ alt }}" class="l--mw-none l--center-y l--absolute mw-100 {{ img-class }}">
      {{ /asset:image }}
    </div>
    <div class="m--g-col-6">
      <h2 class="title-2 {{ fg-color }}{{if fg-color==='slate' }}-120{{ /if }} mb-4 m--title-3 m--mt-0">{{ title | widont }}</h2>
      <p class="body-3 {{ fg-color }} m--mb-0">{{ description }}</p>
    </div>
  </div>
</section>