Fix responsivness of hero blocks

source/_patterns/02-organisms/03-hero/hero.mustache

 <article class="hero {{ classes }}">
-  <div class="container grid grid-cols-7 gap-1 items-start">
-    <div class="col-span-3">
-      <h1 class="head-alt-xl max-w-xl">{{ claim }}{{^ claim }}Piráti<br>Pardubického<br>kraje{{/ claim }}</h1>
-      <div class="mt-6">
-        {{> atoms-icon-button(classes: "btn--black btn--hoveractive text-lg", icon: "fas fa-chevron-right") }}
+  <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-1 items-center">
+    <div class="lg:row-span-4 lg:col-span-3 order-1">
+      <h1 class="head-alt-md sm:head-alt-lg md:head-alt-xl">{{ claim }}{{^ claim }}Piráti<br>Pardubického<br>kraje{{/ claim }}</h1>
+    </div>
+    <div class="lg:row-span-1 lg:col-span-3 order-3">
+      <div class="md-2 md:mt-4">
+        {{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "fas fa-chevron-right") }}
       </div>
     </div>
-    <div class="col-span-4">
+    <div class="lg:row-span-5 lg:col-span-4 order-2">
       <img src="/images/hero-profile-img.png" />
     </div>
   </div>

source/_patterns/02-organisms/03-hero/image-hero.mustache

 <article class="hero hero--image {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
-  <div class="container flex space-x-8">
-    <div>
-      <h1 class="head-alt-lg max-w-xl">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
-      <div class="mt-6">
-        <a href="#" class="btn btn--white text-lg"><span class="btn__body">{{ cta }}</span></a>
-        <a href="#" class="btn btn--white text-lg"><span class="btn__body">{{ cta }}</span></a>
+  <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-1 items-center">
+    <div class="lg:row-span-4 lg:col-span-3 order-1">
+      <h1 class="head-alt-md md:head-alt-xl">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
+    </div>
+    <div class="lg:row-span-1 lg:col-span-3 order-3">
+      <div class="md-2 md:mt-4 space-y-2">
+        {{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
+        {{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
       </div>
     </div>
-    <div>
+    <div class="lg:row-span-5 lg:col-span-4 order-2">
       <img src="/images/hero-profile-img.png" />
     </div>
   </div>

source/css/atoms/heading.pcss

-.head-alt-xl {
-  @apply text-7xl font-alt font-normal leading-negative;
-}
+@responsive {
+  .head-alt-xl {
+    @apply text-7xl font-alt font-normal leading-negative;
+  }
 
-.head-alt-lg {
-  @apply text-6xl font-alt font-normal leading-negative;
-}
+  .head-alt-lg {
+    @apply text-6xl font-alt font-normal leading-negative;
+  }
 
-.head-alt-md {
-  @apply text-4xl font-alt font-normal leading-negative;
-}
+  .head-alt-md {
+    @apply text-4xl font-alt font-normal leading-negative;
+  }
 
-.head-alt-base {
-  @apply text-3xl font-alt font-normal leading-negative;
-}
+  .head-alt-base {
+    @apply text-3xl font-alt font-normal leading-negative;
+  }
 
-.head-alt-sm {
-  @apply text-2xl font-alt font-normal leading-negative;
-}
+  .head-alt-sm {
+    @apply text-2xl font-alt font-normal leading-negative;
+  }
 
-.head-alt-xs {
-  @apply text-xl font-alt font-normal leading-negative;
-}
+  .head-alt-xs {
+    @apply text-xl font-alt font-normal leading-negative;
+  }
 
-.head-alt-2xs {
-  @apply text-lg font-alt font-normal leading-negative;
-}
+  .head-alt-2xs {
+    @apply text-lg font-alt font-normal leading-negative;
+  }
 
 
 
-.head-base {
-  @apply text-3xl font-condensed font-medium leading-tight;
-}
+  .head-base {
+    @apply text-3xl font-condensed font-medium leading-tight;
+  }
 
-.head-sm {
-  @apply text-2xl font-condensed font-medium leading-tight;
-}
+  .head-sm {
+    @apply text-2xl font-condensed font-medium leading-tight;
+  }
 
-.head-xs {
-  @apply text-xl font-condensed font-medium leading-tight;
-}
+  .head-xs {
+    @apply text-xl font-condensed font-medium leading-tight;
+  }
 
-.head-2xs {
-  @apply text-lg font-condensed font-medium leading-tight;
-}
+  .head-2xs {
+    @apply text-lg font-condensed font-medium leading-tight;
+  }
 
 
 
-.head-heavy-base {
-  @apply text-3xl font-condensed font-bold leading-tight;
-}
+  .head-heavy-base {
+    @apply text-3xl font-condensed font-bold leading-tight;
+  }
 
-.head-heavy-sm {
-  @apply text-2xl font-condensed font-bold leading-tight;
-}
+  .head-heavy-sm {
+    @apply text-2xl font-condensed font-bold leading-tight;
+  }
 
-.head-heavy-xs {
-  @apply text-xl font-condensed font-bold leading-tight;
-}
+  .head-heavy-xs {
+    @apply text-xl font-condensed font-bold leading-tight;
+  }
 
-.head-heavy-2xs {
-  @apply text-lg font-condensed font-bold leading-tight;
-}
+  .head-heavy-2xs {
+    @apply text-lg font-condensed font-bold leading-tight;
+  }
 
 
 
-.head-allcaps-2xs {
-  @apply text-lg font-condensed uppercase leading-tight;
-}
+  .head-allcaps-2xs {
+    @apply text-lg font-condensed uppercase leading-tight;
+  }
 
-.head-allcaps-3xs {
-  @apply text-base font-condensed uppercase leading-tight;
-}
+  .head-allcaps-3xs {
+    @apply text-base font-condensed uppercase leading-tight;
+  }
 
 
 
 
-.head-allcaps-heavy-2xs {
-  @apply text-lg font-condensed font-bold uppercase leading-tight;
-}
+  .head-allcaps-heavy-2xs {
+    @apply text-lg font-condensed font-bold uppercase leading-tight;
+  }
 
-.head-allcaps-heavy-3xs {
-  @apply text-base font-condensed font-bold uppercase leading-tight;
+  .head-allcaps-heavy-3xs {
+    @apply text-base font-condensed font-bold uppercase leading-tight;
+  }
 }
+

source/css/organisms/hero.pcss

 .hero {
-  @apply py-8;
+  @apply py-2;
+
+  @screen md {
+    @apply py-8;
+  }
 }
 
 .hero--image {