{{!< default}}

{{#post}}
<article>
<div class="relative group index-header">
  {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
    <div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
    </div>
  </div>
  <div class="absolute bottom-0 py-6 left-0 right-0">
   <div class="container mx-auto px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64">
    {{#if primary_tag}}
    {{#primary_tag}}
    <div>
      <a href="{{url}}"><p class="bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm">{{name}}</p></a>
    </div>
    {{/primary_tag}}
    {{/if}}
    <div>
      <h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
    </div>
   </div>
  </div>
  <div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
  {{> "site-header"}}
  </div>
</div>

<div class="px-4">
<main class="container mx-auto content" id="post">
    <div class="px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64">
      {{content}}
    </div>
</main>
</div>
{{/post}}
</article>

{{#contentFor "scripts"}}
<script>
$(document).ready(function () {
        // FitVids - start
        var $postContent = $("#post");
        $postContent.fitVids();
        // FitVids - end
});
</script>
{{/contentFor}}