{{!< default}} {{> header-background background=@site.cover_image}}

  <div class="page-header">
    <div class="page-header__background responsive-header-img">
      <div class="page-header__overlay"></div>
    </div>
    <div class="page-header__contents">
      <div class="container mx-auto main">
        {{#if @site.logo}}
        <img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="page-header__icon">
        {{/if}}
        <h1 class="page-header__heading">{{@site.title}}</h1>
        <p class="page-header__text">{{@site.description}}</p>
      </div>
    </div>
  </div>

  <main class="post-list container mx-auto">
    {{#foreach posts}}
    {{> "post-card"}}
    {{/foreach}}
  </main>
  {{#contentFor "scripts"}}
  {{/contentFor}}