Merge branch 'feature/pirati-cz' into feature/pirati-cz-ondra

main/styleguide/source/_patterns/organisms/newsletter-section.mustache

 <div class="footer-section section-clip bg-cover bg-no-repeat flex"
      style="background-image: url('https://images.pexels.com/photos/3073681/pexels-photo-3073681.jpeg')">
-  <div class="flex items-center w-full">
-    <div class="grid-container">
-      <div class="flex flex-col items-end grid-left mb-4">
-        <i class="ico--anchor text-9xl mb-4 w-3/4"></i>
-        <span class="font-bold uppercase w-3/4">
+  <div class="grid-container items-center px-4">
+    <div class="grid-full flex flex-col">
+      <div class="flex space-x-3 mb-4">
+        <i class="ico--anchor text-7xl xl:text-9xl mb-4 xl:w-1/4"></i>
+        <h5 class="uppercase mt-4 head-alt-md xl:head-alt-lg">Odebírej náš <br> newsletter</h5>
+      </div>
+      <div class="flex xl:space-x-3 flex-wrap flex-col xl:flex-row">
+          <span class="uppercase text-sm xl:text-base font-bold mb-2 xl:w-1/4">
             Fake news tam nenajdeš, ale dozvíš se co chystáme doopravdy!
           </span>
-      </div>
-      <div class="grid-content-with-right-side">
-        <h5 class="head-alt-md my-4 uppercase w-3/4 md:head-alt-lg">
-          Odebírej náš newsletter
-        </h5>
-        <div class="w-3/4">
+        <div class="">
           {{> atoms-form-input(placeholder: "Tvůj email", classes: "mb-3 w-full") }}
           {{> atoms-form-checkbox(label: "Souhlasím se zpracováním osobních údajů", classes: "mb-3") }}
           {{> atoms-button-animated(btn-text: "Odebírat") }}

main/styleguide/source/css/atoms/container.pcss

@@ -64,8 +64,8 @@
 }
 
 .grid-full {
-  grid-column-start: left-side;;
-  grid-column-end: right-side;
+  grid-column: left-side / right-side;
+  grid-row: left-side / right-side;
 }
 
 .grid-left-side {

main/styleguide/source/css/atoms/extra_sizing.pcss

 .footer-section {
-  height: 981px;
+  height: 450px;
 }
 
 .person-box-medium {
@@ -29,5 +29,8 @@
     .simple-header-height {
       height: 26rem;
     }
+    .footer-section {
+      height: 981px;
+    }
   }
 }

main/styleguide/source/css/atoms/form-field.pcss

@@ -136,7 +136,7 @@
   }
 
   label {
-    @apply max-w-lg leading-tight uppercase;
+    @apply max-w-lg leading-tight uppercase font-medium text-sm xl:text-base;
   }
 
   &:after {