<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 text-lg btn--fullwidth md:btn--autowidth mb-1") }}
            {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth md:btn--autowidth") }}
          </div>
        </div>
      </div>
    </div>
  </section>
  <hr class="footer-splitter" />
  <section class="footer-section footer-section--dense bg-grey-500">
    <div class="container">
      <div class="grid grid-cols-12 justify-content-left">
        <div class="md:col-span-3 col-span-12">
          <span class="text-xl uppercase text-white">Otevřenost</span>
        </div>
        <div class="lg:col-span-2 md:col-span-3 col-span-12">
          <ul>
            <li>
              <a href="#">Transparentní účet</a>
            </li>
          </ul>
        </div>
        <div class="lg:col-span-2 md:col-span-3 col-span-12">
          <ul>
            <li>
              <a href="#">Registr smluv</a>
            </li>
          </ul>
        </div>
        <div class="lg:col-span-2 md:col-span-3 col-span-12">
          <ul>
            <li>
              <a href="#">Otevřené účetnictví</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>
  <section class="footer-section bg-black">
    <div class="container">
      <div class="footer-contacts">
        {{> molecules-condensed-badge(classes: "footer-contacts__item") }}
        {{> molecules-condensed-badge(classes: "footer-contacts__item") }}
        {{> molecules-condensed-badge(classes: "footer-contacts__item") }}
        <div class="mt-4 lg:mt-0 lg:text-right footer-contacts__item">
          {{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg btn--fading") }}
        </div>
      </div>
    </div>
  </section>
</footer>