{% set classes = ['cta', 'hg:relative', 'hg:z-1'] %}

{% if text_align == 'left' %}
  {% set alignment = 'hg:text-left' %}
  {% set list_extras = 'hg:md:justify-start' %}
{% elseif text_align == 'right' %}
  {% set alignment = 'hg:text-right' %}
  {% set list_extras = 'hg:md:justify-end' %}
{% else %}
  {% set alignment = 'hg:text-center hg:lg:max-w-3/4 hg:mx-auto' %}
  {% set list_extras = 'hg:justify-center hg:items-center' %}
{% endif %}

{% if has_background_image == true %}
  {% set text_color = 'hg:text-white!' %}
{% endif %}

<section class="{{ classes|join(' ') }}">
  {% block media %}
    {% if media.src is not empty and has_background_image %}
      <div class="cta--media hg:absolute hg:left-[50%] hg:z-[-1] hg:ms-[-50vw] hg:h-full hg:w-screen">
        <div class="hg:absolute hg:inset-0 hg:bg-black/30"></div>
        <img src="{{ media.src }}" alt="{{ media.alt }}" class="hg:h-full hg:w-full hg:object-cover" />
      </div>
    {% endif %}
  {% endblock %}
  <div
    class="cta--content hg:relative hg:flex hg:min-h-80 hg:flex-col hg:justify-center hg:gap-6 hg:py-[90px] hg:lg:gap-8 hg:lg:py-[115px] hg:xl:py-[140px] {{
    text_align == 'center'
      ? 'hg:items-center'
    }} {{ alignment }} {{ text_color }}"
  >
    {{
      include(
        'mercury:heading',
        {
          heading_classes: ['hg:font-extrabold']
        }
      )
    }}
    <p class="hg:text-md hg:font-normal">
      {{ text }}
    </p>
    {% if block('actions') is defined %}
      <div class="cta--links hg:flex hg:w-full hg:flex-col hg:gap-6 hg:sm:flex-row {{ list_extras }}">
        {% block actions %}

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