{{!< default}}
<div class="relative group index-header">
  {{> header-background background=@site.cover_image}}
    <div class="w-full h-full opacity-50 bg-black">
    </div>
  </div>
  <div class="absolute bottom-0 py-4 left-0 right-0">
    <div class="container mx-auto content-full flex flex-col py-4">
      {{#if @site.logo}}
      <div class="w-24 h-24 py-4">
        <img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain">
      </div>
      {{/if}}
      <div class="block flex flex-col pl-4 flex-grow">
        <div class="">
          <h1 class="text-2xl md:text-4xl font-light text-white">{{@site.title}}</h1>
        </div>
        <div class="">
          <p class="text-lg md:text-xl font-light text-white">{{@site.description}}</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="post-feed content w-full px-2">
  {{#foreach posts}}
    {{> "post-card"}}
  {{/foreach}}
</div>
{{#contentFor "scripts"}}
{{/contentFor}}