Add election program detail

source/_patterns/01-molecules/00-badge/basic-badge.mustache

@@ -2,7 +2,7 @@
   {{> atoms-basic-avatar(classes: "avatar--md") }}
   <div class="badge__body">
     <span class="head-heavy-sm">{{ person.first }} {{ person.last }}</span>
-    <p class="badge__occupation">{{ person.occupation }}</p>
+    <p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
     {{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
     {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
   </div>

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

 <div class="sharebox card elevation-10 {{ classes }}">
-  <div class="card__body p-8">
+  <div class="card__body">
     <span class="head-alt-base md:head-alt-md">Sdílení je aktem lásky</span>
 
     <div class="flex w-full space-x-4 pt-4 md:pt-8 text-center text-white">

source/_patterns/02-organisms/00-global/footer.mustache

@@ -61,14 +61,14 @@
               {{> 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 md:btn--autowidth mb-2") }}
-            {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth md:btn--autowidth") }}
+            {{> 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="footer-splitter" />
+  <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">

source/_patterns/03-templates/article-detail.mustache

@@ -15,7 +15,7 @@
     </div>
     {{> atoms-figure(caption: "Popisek fotky") }}
 
-    <div class="lg:flex mt-8 lg:space-x-8">
+    <div class="lg:flex mt-8 lg:space-x-16">
       <div class="lg:w-2/3">
         {{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
       </div>

source/css/atoms/card.pcss

@@ -3,5 +3,5 @@
 }
 
 .card__body {
-  @apply p-4;
+  @apply p-8;
 }

source/css/atoms/horizontal-rule.pcss

-hr {
-  @apply border-t border-grey-100;
+hr:not(.hr--unstyled) {
+  @apply border-t border-grey-100 my-4;
+
+  @screen md {
+    @apply my-8;
+  }
+
+  &.hr--condensed {
+    @apply my-2;
+
+    @screen md {
+      @apply my-4;
+    }
+  }
 }

source/css/atoms/list.pcss

-.unordered-list,
 .ordered-list {
-  @apply pl-4 ml-6;
+  @apply pl-4;
 }
 
 .unordered-list {
-  list-style-type: square;
+  li {
+    @apply relative flex items-center;
+
+    &:before {
+      @apply text-black pr-2;
+
+      font-family: "Font Awesome 5 Pro";
+      content: "\f45c";
+      font-size: 7px;
+      font-weight: 600;
+    }
+  }
+
+  &.text-sm li:before {
+    font-size: 5px;
+  }
+}
+
+.unordered-list--linked {
+  li:after {
+    @apply text-black pl-2 ml-auto;
+
+    font-family: "Font Awesome 5 Pro";
+    content: "\f054";
+    font-size: 10px;
+    font-weight: 300;
+  }
+
+  &.text-sm li:after {
+    font-size: 8px;
+  }
 }
 
 .ordered-list {

source/css/molecules/article-card.pcss

@@ -49,7 +49,7 @@
 
 .article-card__body {
   /* Use flexbox to grow the excerpt to max height (align category buttons at the bottom) */
-  @apply flex flex-col h-full;
+  @apply flex flex-col h-full p-4;
 }
 
 .article-card__headline {

source/css/molecules/candidate-card.pcss

@@ -47,7 +47,7 @@
 }
 
 .candidate-card__social {
-  @apply text-center;
+  @apply text-center p-4;
   grid-area: social;
 }
 

tailwind.config.js

@@ -86,26 +86,6 @@ module.exports = {
         'linkedin': '#0066a9',
       }
     },
-    // spacing: {
-    //   '0': '0',
-    //   'xs': '0.15rem',
-    //   'sm': '0.25rem',
-    //   '1': '0.5rem',
-    //   '2': '1rem',
-    //   '3': '1.5rem',
-    //   '4': '2rem',
-    //   '5': '2.5rem',
-    //   '6': '3rem',
-    //   '7': '4rem',
-    //   '8': '6rem',
-    //   '9': '8rem',
-    //   '10': '10rem',
-    //   '11': '12rem',
-    //   '11': '16rem',
-    //   '12': '20rem',
-    //   '13': '24rem',
-    //   '14': '30rem',
-    // },
     container: {
       center: true,
       padding: {