{# Overriding media_slot just for Storybook #}
{% embed 'mercury:hero-billboard' %}
  {% block hero_media %}
    {% if media.src is not empty %}
      <div class="hg:absolute hg:inset-0 {{ overlay_opacity }}"></div>
    {% endif %}
    <img
      src="{{ componentMetadata.path ~ '/' ~ storybook.media.src }}"
      alt="{{ storybook.media.alt }}"
      class="hg:h-full hg:w-full hg:object-cover {{ object_position }}"
    />
  {% endblock %}
  {% block hero_content %}
    {{
      include(
        'mercury:heading',
        {
          heading_text: storybook.heading_text,
          level: storybook.level,
          url: 'No URL'
        }
      )
    }}

    {{
      include(
        'mercury:text',
        {
          text: '<p>Nulla purus suscipit nostra sagittis lectus sapien gravida ultrices. Euismod condimentum volutpat natoque feugiat consequat rutrum duis tellus vestibulum cubilia.</p>'
        }
      )
    }}

    {{
      include(
        'mercury:button',
        {
          label: 'Example button',
          href: 'https://example.com',
          variant: primary
        }
      )
    }}
  {% endblock %}
{% endembed %}
