{{/* section
label: Hero
about: The big opening at the top of a page, with buttons.
fields:
  - { name: eyebrow, type: text, help: A short line above the heading. }
  - { name: heading, type: text, required: true }
  - { name: text, type: markdown }
  - { name: image, type: image, label: Picture, help: Beside the text on wide screens, above it on phones. }
  - { name: image_alt, type: text, label: What the picture shows, help: For people who can't see it. Leave empty only if it's decoration. }
  - name: buttons
    type: list
    fields:
      - { name: text, type: text, required: true }
      - { name: href, type: link, label: Goes to, required: true }
      - { name: primary, type: bool, label: Main button }
*/}}
<section class="hero{{ if .Data.image }} with-picture{{ end }}">
  <div class="wrap">
    <div class="hero-text">
      {{ with .Data.eyebrow }}<p class="eyebrow">{{ . }}</p>{{ end }}
      <h1>{{ .Data.heading }}</h1>
      {{ with .Data.text }}<div class="lede">{{ markdownify . }}</div>{{ end }}
      {{ with .Data.buttons }}<p class="actions">{{ range . }}<a class="btn{{ if .primary }} primary{{ end }}" href="{{ .href }}">{{ .text }}</a>{{ end }}</p>{{ end }}
    </div>
    {{ with .Data.image }}<figure class="hero-picture"><img src="{{ . }}" alt="{{ $.Data.image_alt }}"{{ with imageSize . }} width="{{ .w }}" height="{{ .h }}"{{ end }} fetchpriority="high"></figure>{{ end }}
  </div>
</section>