web/wp-content/themes/mozilla-builders/templates/components/footer.twig

<footer class="mt-12 md:mt-24 pb-4 grid grid-site gap-4 centered-page">
  <div class="col-span-full border-b border-content mb-6 lg:mb-8">
    {% for section in options.footer_links_section %}
    <div class="flex max-md:gap-x-grid-site-gutter max-md:py-2 border-t border-content py-1.5">
      <h2 class="max-md:w-1/2 text-sm font-bold md:leading-3 uppercase whitespace-nowrap">{{ section.footer_links_section_heading }}</h2>
      <ul class="max-md:w-1/2 flex max-md:flex-col md:justify-around md:items-center w-full">
        {% for item in section.footer_links_items %}
          <li class="text-sm md:leading-3">
            <a href="{{ item.footer_links_item_link.url }}" class="uppercase hocus:bg-spot hocus:text-black">{{ item.footer_links_item_link.name ?: item.footer_links_item_link.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
    {% endfor %}
  </div>

  <svg class="col-span-full aspect-mozilla-logo" aria-hidden="true">
    <use xlink:href="#mozillalogo"></use>
  </svg>
  <span class="sr-only">Mozilla</span>

  <div class="col-span-full flex items-start justify-between text-xs uppercase font-semibold gap-6">
    <p class="max-md:w-1/2 whitespace-nowrap"><a href="https://mozilla.org/">Mozilla</a> &copy; {{ now|date('Y') }}</p>

    <ul class="max-md:w-1/2 flex flex-wrap max-md:flex-col md:items-center justify-end md:gap-x-6 gap-y-1.5 text-right">
      {% for item in primary_footer_menu.items %}
        <li class="text-xs leading-none"><a href="{{ item.url }}" class="hocus:bg-spot hocus:text-black">{{ item.name }}</a></li>
      {% endfor %}
    </ul>
  </div>
</footer>