{% set classes = classes|default([])|merge(['hero-blog', 'py-8', '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 container mx-auto flex flex-col gap-8 px-6 md:w-full md:gap-12 lg:w-10/12 xl:w-8/12">
    <p>
      <time datetime="{{ date_formatted }}">{{ date_formatted }}</time>
    </p>

    {% block title %}
      {{
        include(
          'mercury:heading',
          {
            heading_text: heading_text|default(''),
            level: level|default(1),
            url: 'No URL',
            text_color: 'default',
            text_size: 'heading-responsive-4xl',
            align: 'left'
          },
          with_context: false
        )
      }}
    {% endblock %}

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

  {% if block('blog_media') is defined %}
    <div class="w:full relative">
      <div class="relative mx-auto mt-8 px-6 md:mt-12 lg:w-full xl:w-10/12">
        {% block blog_media %}

        {% endblock %}
      </div>
      <div class="absolute -bottom-8 z-[-1] h-[calc(33.3%+32px)] w-full bg-accent md:-bottom-12 md:h-[calc(33.3%+48px)]"></div>
    </div>
  {% endif %}
</section>
