{% set footer_classes = footer_classes|default([])|merge(['hg:flex', 'hg:flex-col'])|filter(v => v is not empty) %}

<section class="site-footer">
  <div class="{{ footer_classes|join(' ') }}">
    <div
      class="site-footer--top hg:flex hg:w-full hg:flex-col hg:justify-between hg:gap-6 hg:border-t hg:border-(--hgc-footer-border) hg:py-8 hg:md:grid hg:md:grid-cols-2 hg:md:gap-6"
    >
      {% if block('footer_first') is defined %}
        <div class="site-footer--first-col hg:flex hg:flex-col hg:gap-6">
          {% block footer_first %}
            {# Slot for components. #}
          {% endblock %}
        </div>
      {% endif %}

      {% if block('footer_last') is defined %}
        <div
          class="site-footer--last-col hg:flex hg:flex-col hg:gap-2 hg:md:mx-0 hg:md:ms-auto hg:md:w-xs hg:lg:w-md hg:[&_form]:flex hg:[&_form]:flex-row hg:[&_form]:gap-2 hg:md:[&_form]:items-end"
        >
          {% block footer_last %}
            {# Slot for components. #}
          {% endblock %}
        </div>
      {% endif %}
    </div>

    <div
      class="site-footer--bottom hg:flex hg:w-full hg:flex-col hg:gap-2 hg:border-t hg:border-(--hgc-footer-border) hg:py-3 hg:text-xs hg:md:grid hg:md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] hg:md:gap-6 hg:md:py-4"
    >
      {% if block('footer_utility_first') is defined %}
        <div class="site-footer--bottom-col">
          {% block footer_utility_first %}
            {# Slot for components. #}
          {% endblock %}
        </div>
      {% endif %}

      {% if block('footer_utility_last') is defined %}
        <div class="site-footer--bottom-col hg:md:flex hg:md:justify-end">
          {% block footer_utility_last %}
            {# Slot for components. #}
          {% endblock %}
        </div>
      {% endif %}
    </div>
  </div>
</section>
