{{#extends "base"}}
{{#block "main"}}
<section class="wrap hero-post" aria-labelledby="hero-h">
  <h1 id="hero-h" class="vh">{{headline}}</h1>
  <span class="hero-media">
    <img src="{{site_path}}images/feature-640.webp" srcset="{{site_path}}images/feature-320.webp 320w, {{site_path}}images/feature-480.webp 480w, {{site_path}}images/feature-640.webp 640w, {{site_path}}images/feature-768.webp 768w, {{site_path}}images/feature-960.webp 960w, {{site_path}}images/feature.webp 1200w" sizes="(min-width: 48rem) 48rem, calc(100vw - 2.5rem)" width="1200" height="742" alt="{{feature_alt}}" fetchpriority="high">
  </span>
  <div class="hero-grid">
    <div>
      <h2 class="hero-h"><a href="{{p1_href}}">{{p1_title}}</a></h2>
      <p class="hero-date"><time datetime="{{p1_iso}}">{{p1_date}}</time></p>
    </div>
    <div>
      <p class="hero-excerpt">{{p1_excerpt}}</p>
      <cite class="byline"><span class="byline-name">{{p1_author}}</span></cite>
    </div>
  </div>
</section>

<section class="wrap stories" aria-labelledby="stories-h">
  <h2 id="stories-h" class="section-h">{{more_h}}</h2>
  <ul class="story-list">
    <li class="story">
      <span class="story-media">
        <img src="{{site_path}}images/journal-640.webp" srcset="{{site_path}}images/journal-320.webp 320w, {{site_path}}images/journal-480.webp 480w, {{site_path}}images/journal-640.webp 640w, {{site_path}}images/journal-768.webp 768w, {{site_path}}images/journal-960.webp 960w, {{site_path}}images/journal.webp 1200w" sizes="(max-width: 45rem) 100vw, 50vw" width="1200" height="742" alt="{{journal_alt}}" loading="lazy" decoding="async">
      </span>
      <h3 class="story-h"><a href="{{p2_href}}">{{p2_title}}</a></h3>
      <p class="story-date"><time datetime="{{p2_iso}}">{{p2_date}}</time></p>
      <p class="story-excerpt">{{p2_excerpt}}</p>
      <cite class="byline"><span class="byline-name">{{p2_author}}</span></cite>
    </li>
    <li class="story">
      <span class="story-media">
        <img src="{{site_path}}images/culture-640.webp" srcset="{{site_path}}images/culture-320.webp 320w, {{site_path}}images/culture-480.webp 480w, {{site_path}}images/culture-640.webp 640w, {{site_path}}images/culture-768.webp 768w, {{site_path}}images/culture-960.webp 960w, {{site_path}}images/culture.webp 1200w" sizes="(max-width: 45rem) 100vw, 50vw" width="1200" height="742" alt="{{culture_alt}}" loading="lazy" decoding="async">
      </span>
      <h3 class="story-h"><a href="{{p3_href}}">{{p3_title}}</a></h3>
      <p class="story-date"><time datetime="{{p3_iso}}">{{p3_date}}</time></p>
      <p class="story-excerpt">{{p3_excerpt}}</p>
      <cite class="byline"><span class="byline-name">{{p3_author}}</span></cite>
    </li>
  </ul>
  <p class="more-cta"><a class="btn btn-secondary" href="{{locale_path}}{{slug_archive}}/">{{more_cta}}</a></p>
</section>
{{/block}}