---
base_classes: "px-5"
default_spacing: "my-11 s--my-12"
hero_lead_in_classes: "lead-in-1 mb-4 tt-upper ta-center slate-80 body"
---
{{#
/**
 * @name hero/title-text-cta
 * @todo Document property vars/partial
 */
#}}
<section class="{{ base_classes }} {{ custom_spacing or default_spacing }} {{ custom_classes }}" hero>
  <div class="mw-grid mx-auto ta-center">
    {{ if hero_image_desktop }}
      <picture class="mw-grid mx-auto block mb-6">
        <source srcset="{{ hero_image_mobile or hero_image_desktop }}" media="(max-width: 480px)">
        <img src="{{ hero_image_desktop }}"
          alt="{{ hero_image_alt }}"
          class="block mx-auto">
      </picture>
    {{ /if }}
    <h1 class="{{ hero_lead_in_classes }}">{{ hero_lead_in_title }}</h1>
    <div class="fs-10 fw-700 lh-9 mb-0 ta-center slate-120 title m--fs-13 m--lh-11 m--mt-4 l--fs-14 l--lh-13 {{ hero_headline_classes }}">{{ hero_headline | widont }}</div>
    {{ if hero_subheadline }}
      <div class="body-4 mt-5 mb-8 ta-center slate m--body-5 m--px-8 m--mt-4 m--mb-9 {{ hero_subheadline_classes }}">{{ hero_subheadline }}</div>
    {{ /if }}
  </div>
  <div class="ta-center {{ if !hero_subheadline }}mt-6{{ /if }}">
    {{ partial:cta-button }}
  </div>
</section>