refactor: fine-tune hero banners

source/_patterns/02-organisms/03-hero/elections-hero-multiple-candidacies.mustache

@@ -2,12 +2,12 @@
   <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
     <div class="lg:row-span-2 lg:col-span-3 order-1">
       {{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
-      <h1 class="head-alt-md md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
+      <h1 class="head-alt-lg md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
-      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
-        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
-        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
+      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
       </div>
     </div>
     <div class="lg:row-span-3 lg:col-span-4 order-2">

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

@@ -2,12 +2,12 @@
   <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
     <div class="lg:row-span-2 lg:col-span-3 order-1">
       {{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
-      <h1 class="head-alt-md md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
+      <h1 class="head-alt-lg md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
-      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
-        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
-        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
+      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
       </div>
     </div>
     <div class="lg:row-span-3 lg:col-span-4 order-2">

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

@@ -5,7 +5,7 @@
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
       <div class="mt-4 md:mt-8">
-        {{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "ico--chevron-right") }}
+        {{> atoms-icon-button(classes: "btn--black block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg", icon: "ico--chevron-right") }}
       </div>
     </div>
     <div class="lg:row-span-5 lg:col-span-4 order-2">

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

 <article class="hero py-8 lg:py-16 {{ classes }}">
   <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
     <div class="lg:row-span-2 lg:col-span-3 order-1">
-      <h1 class="head-alt-md md:head-alt-xl">Piráti Pardubického kraje</h1>
+      <h1 class="head-alt-lg md:head-alt-xl">Piráti Pardubického kraje</h1>
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
       <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
-        {{> atoms-icon-button(icon: "ico--chevron-right", classes: "btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
+        {{> atoms-icon-button(icon: "ico--chevron-right", classes: "block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg") }}
       </div>
     </div>
     <div class="lg:row-span-3 lg:col-span-4 order-2">

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 grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
-    <div class="lg:row-span-4 lg:col-span-3 order-1">
-      <h1 class="head-alt-md md:head-alt-xl text-shadow-lg">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
-    </div>
-    <div class="lg:row-span-1 lg:col-span-3 order-3">
-      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
-        {{> 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 class="lg:row-span-5 lg:col-span-4 order-2">
-      <img src="/images/hero-profile-img.png" />
+<article class="hero hero--image hero--condensed {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+  <div class="container text-center">
+    <h1 class="head-alt-md md:head-alt-xl text-shadow-lg">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
+    <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
+      {{> atoms-basic-button(classes: "btn--white btn--autowidth text-sm md:text-lg") }}
     </div>
   </div>
 </article>

source/css/organisms/hero.pcss

 .hero {
-  @apply py-4;
+  @apply py-8;
 
   @screen md {
     @apply py-24;
   }
 }
 
+.hero--condensed {
+  @apply py-8;
+
+  @screen md {
+    @apply py-16;
+  }
+}
+
 .hero--image {
   background:
     linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.9)),