footer.mustache

<footer class="footer">
  <section class="footer-section bg-grey-700">
    <div class="top">
      <div class="container container--default">
        <div class="grid grid-cols-12">
          <div class="md:col-span-3 col-span-12 footer-copy">
            <img
              src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
              alt=""
              class="footer-brand w-32 md:w-40 pb-6"
            />
            <p class="para hidden md:block">
              Piráti, 2020. Všechna práva vyhlazena. Sdílejte a nechte
              ostatní sdílet za stejných podmínek.
            </p>
          </div>
          <div class="md:col-span-2 col-span-12">
            <span class="text-xl uppercase text-white">Nová sekce</span>
            <ul class="mt-6">
              <li class="mb-2">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-2">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-2">
                <a href="#">Lorem ipsum</a>
              </li>
            </ul>
          </div>
          <div class="md:col-span-2 col-span-12">
            <span class="text-xl uppercase text-white">Nová sekce</span>
            <ul class="mt-6">
              <li class="mb-2">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-2">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-2">
                <a href="#">Lorem ipsum</a>
              </li>
            </ul>
          </div>
          <div class="md:col-span-2 col-span-12">
            <span class="text-xl uppercase text-white">Nová sekce</span>
            <ul class="mt-6">
              <li class="mb-2">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-2">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-2">
                <a href="#">Lorem ipsum</a>
              </li>
            </ul>
          </div>
          <div class="md:col-span-3 col-span-12 footer-social mb-6 md:mb-0">
            <div class="mb-4">
              {{> molecules-basic-social-icon-group(classes: "text-white pb-4") }}
              {{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
            </div>
            {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth mb-2") }}
            {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
          </div>
        </div>
      </div>
    </div>
  </section>