Revamp spacing scale

source/_patterns/00-atoms/00-global/04-fonts.mustache

-<div class="space-y-6">
+<div class="space-y-12">
   <div>
     <p class="font-body">Primary font: "Roboto", "Helvetica", "Arial", sans-serif;</p>
     <p class="font-body"><em>Primary font italic: "Roboto", "Helvetica", "Arial", sans-serif;</em></p>

source/_patterns/00-atoms/01-text/headings.mustache

-<div class="space-y-6">
+<div class="space-y-12">
   <div>
     <h1 class="head-alt-xl">{{ headline.short }}</h1>
     <h1 class="head-alt-lg">{{ headline.short }}</h1>

source/_patterns/00-atoms/03-buttons/02-button-colors.mustache

-<div class="inline-flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-  <div class="inline-flex flex-col space-y-1">
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-button(classes: "btn--black") }}
     {{> atoms-basic-button(classes: "btn--grey-800") }}
     {{> atoms-basic-button(classes: "btn--grey-125") }}
@@ -7,7 +7,7 @@
     {{> atoms-basic-button(classes: "btn--white btn--fading") }}
     {{> atoms-basic-button(classes: "btn--green-100") }}
   </div>
-  <div class="inline-flex flex-col space-y-1">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-icon-button(classes: "btn--black") }}
     {{> atoms-icon-button(classes: "btn--grey-800") }}
     {{> atoms-icon-button(classes: "btn--grey-125") }}

source/_patterns/00-atoms/03-buttons/03-button-sizes.mustache

-<div class="inline-flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-  <div class="inline-flex flex-col space-y-1">
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-button(classes: "text-sm" )}}
     {{> atoms-basic-button(classes: "text-base" )}}
     {{> atoms-basic-button(classes: "text-lg" )}}
   </div>
-  <div class="inline-flex flex-col space-y-1">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-button(classes: "text-sm btn--condensed" )}}
     {{> atoms-basic-button(classes: "text-base btn--condensed" )}}
     {{> atoms-basic-button(classes: "text-lg btn--condensed" )}}

source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache

-<div class="inline-flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-  <div class="inline-flex flex-col space-y-1">
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-button(classes: "btn--black btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--grey-800 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }}
@@ -7,7 +7,7 @@
     {{> atoms-basic-button(classes: "btn--white btn--fading btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }}
   </div>
-  <div class="inline-flex flex-col space-y-1">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-icon-button(classes: "btn--black btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--grey-800 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }}

source/_patterns/00-atoms/03-buttons/13-overlay-button-colors.mustache

-<div class="inline-flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-  <div class="inline-flex flex-col space-y-1">
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-overlay-button(overlayColor: "btn--overlay-red-100") }}
     {{> atoms-overlay-button(overlayColor: "btn--overlay-brands-facebook") }}
   </div>

source/_patterns/00-atoms/05-cards/card-elevation-variants.mustache

-<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
   {{> atoms-basic-card(classes: "elevation-1", description: "elevation-1") }}
   {{> atoms-basic-card(classes: "elevation-2", description: "elevation-2") }}
   {{> atoms-basic-card(classes: "elevation-3", description: "elevation-3") }}

source/_patterns/00-atoms/flags/flag-color-variants.mustache

-<div class="inline-flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
-  <div class="inline-flex flex-col space-y-1">
+<div class="inline-flex flex-col lg:flex-row space-y-8 lg:space-y-0 lg:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-flag(classes: "bg-black text-white") }}
   </div>
-  <div class="inline-flex flex-col space-y-1">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-flag(classes: "bg-green-100 text-white") }}
   </div>
-  <div class="inline-flex flex-col space-y-1">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-flag(classes: "bg-red-100 text-white") }}
   </div>
 </div>

source/_patterns/00-atoms/flags/flag-size-variants.mustache

-<div class="inline-flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
-  <div class="inline-flex flex-col space-y-1">
+<div class="inline-flex flex-col lg:flex-row space-y-8 lg:space-y-0 lg:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-flag(font: "head-alt-base") }}
   </div>
-  <div class="inline-flex flex-col space-y-1">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-flag(font: "head-alt-lg") }}
   </div>
-  <div class="inline-flex flex-col space-y-1">
+  <div class="inline-flex flex-col space-y-2">
     {{> atoms-basic-flag(font: "head-alt-xl") }}
   </div>
 </div>

source/_patterns/00-atoms/super-buttons/super-button-color-variants.mustache

-<div class="inline-flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
-  <div class="inline-flex flex-col space-y-1">
+<div class="inline-flex flex-col lg:flex-row space-y-8 lg:space-y-0 lg:space-x-8">
+  <div class="inline-flex flex-col space-y-4">
     {{> atoms-super-button(classes: "bg-grey-125") }}
     {{> atoms-super-button(classes: "bg-black text-white") }}
     {{> atoms-super-button(classes: "bg-brands-facebook text-white") }}

source/_patterns/01-molecules/01-social-icon-group/basic-social-icon-group.mustache

-<div class="social-icon-group space-x-1 {{ classes }}">
+<div class="social-icon-group space-x-2 {{ classes }}">
   {{> atoms-basic-social-icon(icon: "fab fa-twitter") }}
   {{> atoms-basic-social-icon(icon: "fas fa-rss") }}
   {{> atoms-basic-social-icon(icon: "fab fa-instagram") }}

source/_patterns/01-molecules/01-social-icon-group/colored-social-icon-group.mustache

-<div class="social-icon-group space-x-xs {{ classes }}">
+<div class="social-icon-group space-x-0/5 {{ classes }}">
   {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white social-icon--5", icon: "fab fa-facebook") }}
   {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white social-icon--5", icon: "fab fa-twitter") }}
   {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white social-icon--5", icon: "fab fa-linkedin") }}

source/_patterns/01-molecules/02-article-card/article-card.mustache

@@ -16,7 +16,7 @@
   <div class="card__body article-card__body">
     <a href="#"><h1 class="article-card__headline">{{ headline.medium }}</h1></a>
     <p class="article-card__excerpt">{{ excerpt.long }}</p>
-    <div class="inline-block-nogap mt-2">
+    <div class="inline-block-nogap mt-4">
       {{> atoms-basic-button(classes: "article-card__category-button btn--grey-125 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
       {{> atoms-basic-button(classes: "article-card__category-button btn--grey-125 btn--condensed text-sm font-light", cta: "Kategorie 2") }}
       {{> atoms-basic-button(classes: "article-card__category-button btn--grey-125 btn--condensed text-sm font-light", cta: "Dlouhá kategorie 3") }}

source/_patterns/01-molecules/02-article-card/emphasized-article-card.mustache

@@ -16,7 +16,7 @@
   <div class="card__body article-card__body">
     <a href="#" class="hover:line-white"><h1 class="article-card__headline text-white">{{ headline.medium }}</h1></a>
     <p class="article-card__excerpt text-white">{{ excerpt.long }}</p>
-    <div class="inline-block-nogap mt-2">
+    <div class="inline-block-nogap mt-4">
       {{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 1") }}
       {{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 2") }}
       {{> atoms-basic-button(classes: "article-card__category-button btn--grey-800 btn--condensed text-sm font-light", cta: "Kategorie 3") }}

source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache

@@ -7,18 +7,18 @@
       </div>
       <div class="candidate-card__bio">
         <h1 class="head-alt-base md:head-alt-sm">{{ person.first }} {{ person.last }}</h1>
-        <div class="font-light mb-2">{{ person.email }}</div>
+        <div class="font-light mb-4">{{ person.email }}</div>
         <h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
       </div>
       <div class="candidate-card__affiliation">
         <div>{{ person.age }} let</div>
         <div>
-          {{> atoms-basic-avatar(classes: "w-3 mr-1") }}
+          {{> atoms-basic-avatar(classes: "w-6 mr-2") }}
           <span class="font-bold font-condensed">{{ person.party }}</span>
         </div>
       </div>
       <div class="card__body candidate-card__social">
-        <p class="font-light text-sm leading-snug italic mb-2 hidden md:block">{{ person.claim }}</p>
+        <p class="font-light text-sm leading-snug italic mb-4 hidden md:block">{{ person.claim }}</p>
         {{> molecules-basic-social-icon-group }}
       </div>
     </div>

source/_patterns/01-molecules/03-candidate-table-row/candidate-table-row.mustache

@@ -4,7 +4,7 @@
   <div class="candidate-table-row__name head-allcaps-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div>
   <div class="candidate-table-row__bio head-allcaps-3xs">{{ person.age }} let, {{ person.occupation }}</div>
   <div class="candidate-table-row__affiliation">
-    {{> atoms-basic-avatar(classes: "w-3 mr-1") }}
+    {{> atoms-basic-avatar(classes: "w-6 mr-2") }}
     <span class="font-bold font-condensed">{{ person.party }}</span>
   </div>
 </div>

source/_patterns/01-molecules/banner/banner.mustache

@@ -3,10 +3,10 @@
   <div class="banner__body">
     <h1 class="{{ headClasses }}{{^ headClasses }}head-alt-lg{{/ headClasses }} banner__cta">{{ cta }}</h1>
     {{# fullwidthButton }}
-      {{> atoms-button(classes: "btn--white btn--fullwidth mt-4") }}
+      {{> atoms-button(classes: "btn--white btn--fullwidth mt-8") }}
     {{/ fullwidthButton }}
     {{^ fullwidthButton }}
-      {{> atoms-button(classes: "btn--white btn--fullwidth sm:btn--autowidth mt-4") }}
+      {{> atoms-button(classes: "btn--white btn--fullwidth sm:btn--autowidth mt-8") }}
     {{/ fullwidthButton }}
   </div>
 </aside>

source/_patterns/01-molecules/banner/color-variants.mustache

-<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-2" style="min-height: 500px;">
+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-4" style="min-height: 500px;">
   {{> molecules-banner(color: "bg-black") }}
   {{> molecules-banner(color: "bg-red-100") }}
   {{> molecules-banner(color: "bg-green-100") }}

source/_patterns/01-molecules/calendar/calendar-table-row.mustache

@@ -5,14 +5,14 @@
       <strong class="block">{{ dateverbose }}</strong>
       <p class="font-light text-sm mt-sm">Celý den</p>
     </div>
-    <div class="col-span-3 md:col-span-2 mt-2 md:mt-0">
+    <div class="col-span-3 md:col-span-2 mt-4 md:mt-0">
       <strong class="block">{{ headline.short }}</strong>
       <p class="font-light text-sm mt-sm">{{ excerpt.short }}</p>
     </div>
   </div>
   <div class="col-span-2 text-center font-light calendar-table-row__col">
     <a href="#">
-      <i class="fas fa-map-marker-alt text-red-100 mr-sm" aria-hidden="true"></i>
+      <i class="fas fa-map-marker-alt text-red-100 mr-1" aria-hidden="true"></i>
       <span>Mapa</span>
     </a>
   </div>

source/_patterns/01-molecules/content-block/content-block.mustache

-<div class="content-block max-w-2xl">
-  <h1>{{ headline.short }}</h1>
+<div class="content-block {{ classes }}{{^ classes }}max-w-2xl{{/ classes }}">
+  {{^ noStartHeadline }}<h1>{{ headline.short }}</h1>{{/ noStartHeadline }}
   <p>{{ excerpt.long }}</p>
 
   <h2>{{ headline.short }}</h2>