---
base_classes: "px-5"
default_spacing: "my-11 s--my-12"
hero_headline_typography_classes: "fs-10 lh-9 m--fs-13 m--lh-11 m--mt-4 l--fs-14 l--lh-13"
---
{{#
/**
 * @name hero/title-text-image
 * @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">
    <h1 class="lead-in-1 mb-4 tt-upper ta-center slate-80 body mt-0">{{ hero_lead_in_title }}</h1>
    <div class="fw-700 mb-0 ta-center slate-120 title {{ hero_headline_typography_classes }} {{ hero_headline_classes }}">{{ hero_headline | widont }}</div>
    {{ if hero_subheadline }}
      <div class="body-3 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 }}
    {{ if simple_markdown  }}
      <div class="hero-markdown body-4 mt-5 mb-8 ta-center slate m--body-4 m--px-8 m--mt-4 m--mb-9 {{ hero_subheadline_classes }}">{{ simple_markdown | markdown }}</div>
    {{ /if }}
  </div>

  <picture class="mw-grid mx-auto block">
    <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>

</section>