Restyle most of footer

source/_patterns/02-organisms/00-global/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">
+<footer class="footer bg-grey-700 text-white">
+  <div class="footer__main py-4 lg:py-8 container container--default">
+    <section class="footer__brand">
       <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">
+      <p class="para hidden md:block md:mb-4 lg:mb-0">
         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">
+    </section>
+    <section class="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4">
+      <div class="pt-8 pb-4 lg:py-0">
         <span class="text-xl uppercase text-white">Nová sekce</span>
-            <ul class="mt-6">
-              <li class="mb-2">
+        <ul class="mt-6 space-y-2">
+          <li>
             <a href="#">Lorem ipsum</a>
           </li>
-              <li class="mb-2">
+          <li>
             <a href="#">Lorem ipsum</a>
           </li>
-              <li class="mb-2">
+          <li>
             <a href="#">Lorem ipsum</a>
           </li>
         </ul>
       </div>
-          <div class="md:col-span-2 col-span-12">
+      <div class="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
         <span class="text-xl uppercase text-white">Nová sekce</span>
-            <ul class="mt-6">
-              <li class="mb-2">
+        <ul class="mt-6 space-y-2">
+          <li>
             <a href="#">Lorem ipsum</a>
           </li>
-              <li class="mb-2">
+          <li>
             <a href="#">Lorem ipsum</a>
           </li>
-              <li class="mb-2">
+          <li>
             <a href="#">Lorem ipsum</a>
           </li>
         </ul>
       </div>
-          <div class="md:col-span-2 col-span-12">
+      <div class="pt-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
         <span class="text-xl uppercase text-white">Nová sekce</span>
-            <ul class="mt-6">
-              <li class="mb-2">
+        <ul class="mt-6 space-y-2">
+          <li>
             <a href="#">Lorem ipsum</a>
           </li>
-              <li class="mb-2">
+          <li>
             <a href="#">Lorem ipsum</a>
           </li>
-              <li class="mb-2">
+          <li>
             <a href="#">Lorem ipsum</a>
           </li>
         </ul>
       </div>
-          <div class="md:col-span-3 col-span-12 footer-social mb-6 md:mb-0">
+    </section>
+    <section class="footer__social lg:text-right">
       <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>
-  <hr class="hr--unstyled footer-splitter" />
-  <section class="footer-section footer-section--dense bg-grey-700">
-    <div class="container container--default">
-      <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>
+  <section class="footer__sub-links lg:border-t border-grey-400">
+    <div class="container container--default">
+      <div class="flex flex-col lg:flex-row lg:space-x-4 lg:items-center py-4 lg:py-8 border-t border-grey-400 lg:border-t-0">
+        <span class="lg:w-1/4 text-xl uppercase text-white">Otevřenost</span>
+        <ul class="lg:w-2/4 grid grid-cols-1 lg:grid-cols-3 lg:gap-4 items-center mt-6 space-y-2 lg:mt-0 lg:space-y-0">
           <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">
+  <section class="footer-section bg-black py-4 md:py-8">
     <div class="container container--default">
-      <div class="footer-contacts">
-        {{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }}
-        {{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }}
-        {{> molecules-condensed-badge(classes: "footer-contacts__item", hideOccupation: true) }}
-        <div class="mt-8 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 class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {{> molecules-condensed-badge(hideOccupation: true) }}
+        {{> molecules-condensed-badge(hideOccupation: true) }}
+        {{> molecules-condensed-badge(hideOccupation: true) }}
+        <div class="lg:col-span-3 xl:col-span-1 lg:mt-0 lg:text-center xl:text-right">
+          {{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth lg:btn--autowidth text-lg btn--fading") }}
         </div>
       </div>
     </div>

source/css/organisms/footer.pcss

-.footer {
+/* .footer {
   @apply text-grey-200;
 }
 
 .footer-section {
-  @apply py-6;
+  @apply py-4;
 
   @screen md {
     @apply py-12;
@@ -22,7 +22,7 @@
   @apply pr-16;
   order: -2;
 
-  @screen sm {
+  @screen lg {
     order: 0;
   }
 }
@@ -30,24 +30,37 @@
 .footer-social {
   order: -1;
 
-  @screen sm {
+  @screen lg {
     @apply text-right;
     order: 1;
   }
+} */
+
+
+.footer__main {
+  @apply grid;
+  grid-template-areas: "brand"
+                       "social"
+                       "main-links"
 }
 
-.footer-contacts {
-  @apply grid grid-cols-12 gap-4;
+.footer__brand {
+  grid-area: brand;
 }
 
-.footer-contacts .footer-contacts__item {
-  @apply col-span-12 text-white;
+.footer__social {
+  grid-area: social;
+}
 
-  @screen lg {
-    @apply col-span-6;
+.footer__main-links {
+  grid-area: main-links;
 }
 
-  @screen xl {
-    @apply col-span-3;
+@screen lg {
+  .footer__main {
+    @apply gap-4;
+
+    grid-template-areas: "brand main-links social";
+    grid-template-columns: 25% 1fr 25%;
   }
 }