{% set classes = classes|default([])|merge(['hero-blog', 'hg:py-8', 'hg:md:py-12'])|filter(v => v is not empty) %}

{% set date_formatted = date|date('m.d.Y') %}

<section class="{{ classes|join(' ') }}">
  <div class="hero-blog--content hg:container hg:mx-auto hg:flex hg:flex-col hg:gap-8 hg:px-6 hg:md:w-full hg:md:gap-12 hg:lg:w-10/12 hg:xl:w-8/12">
    <p>
      <time datetime="{{ date_formatted }}">{{ date_formatted }}</time>
    </p>

    {% block title %}
      {{
        include(
          'mercury:heading',
          {
            heading_text: heading_text,
            level: 1,
            url: 'No URL'
          }
        )
      }}
    {% endblock %}

    {% block author %}
      {% if author is not empty %}
        <p>
          By {{ author }}
        </p>
      {% endif %}
    {% endblock %}
  </div>

  {% if block('blog_media') is defined %}
    <div class="hg:relative hg:mx-auto hg:mt-8 hg:px-6 hg:md:mt-12 hg:lg:w-full hg:xl:w-10/12">
      <div
        class="hg:absolute hg:-bottom-8 hg:left-1/2 hg:z-[-1] hg:-ml-[50vw] hg:h-[calc(33.3%+32px)] hg:w-screen hg:bg-brand-light hg:md:-bottom-12 hg:md:h-[calc(33.3%+48px)]"
      ></div>
      {% block blog_media %}

      {% endblock %}
    </div>
  {% endif %}
</section>
