footer.mustache

<footer class="footer">
  <section class="footer-section bg-grey-500">
    <div class="top">
      <div class="container">
        <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-9 md:w-10 pb-3"
            />
            <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-3">
              <li class="mb-1">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-1">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-1">
                <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-3">
              <li class="mb-1">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-1">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-1">
                <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-3">
              <li class="mb-1">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-1">
                <a href="#">Lorem ipsum</a>
              </li>
              <li class="mb-1">
                <a href="#">Lorem ipsum</a>
              </li>
            </ul>
          </div>
          <div class="md:col-span-3 col-span-12 footer-social mb-3 md:mb-0">
            <div class="mb-2">
              <div class="social-icon-group space-x-1 text-white pb-2">
                {{> atoms-basic-social-icon(icon: "fab fa-twitter") }}
                {{> atoms-basic-social-icon(icon: "fas fa-rss") }}
                {{> atoms-basic-social-icon(icon: "fab fa-instagram") }}
                {{> atoms-basic-social-icon(icon: "fab fa-flickr") }}
                {{> atoms-basic-social-icon(icon: "fas fa-envelope") }}
              </div>
              {{> 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 btn--lg btn--fullwidth md:btn--autowidth mb-1") }}