{{#
/**
 * @name top-level/hero
 * @todo Document property vars/partial
 */
#}}
<section class="bg-ocean pt-nav-secondary px-5" hero>
  <div class="mw-grid mx-auto m--flex">
    <div class="z-1 pb-10 pt-9 m--pb-11 m--w-60 m--mr-6 l--mr-0 l--pt-11">
      <h1 class="lead-in-1 m-0 white fw-700">{{ lead_in_title }}</h1>
      <p class="title-3 fw-700 my-6 white m--title-4 m--my-7 l--mt-8 l--title-6 l--mb-0 {{ if title==='Automation' }}automation-hero-heading{{/if}}">{{ main_heading }}</p>
      <p class="body-3 white m--mb-7 l--body-5" {{ if title==='Email' }}style="letter-spacing: -.05px;"{{ /if }}>{{ subheading }}</p>
      <div class="mw-32">
        {{ partial:form-free-trial }}
      </div>
    </div>
    <div class="none m--block relative m--w-40">
      {{ asset:hero_image }}
      <img src="{{ url }}" alt="{{ alt }}" class="absolute mw-none m--h-100 m--top-3 {{ if title==='Email' }}m--left-0{{ /if }} {{ if title==='CRM' }}m--left-n4{{/if}} m--w-auto {{ img-classes }}" {{ if title==='CRM' }}style="height: 112%"{{ /if }}>
      {{ /asset:hero_image }}
    </div>
  </div>
</section>