[ADD] twitter section & header

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

-<div class="container--medium mx-auto pt-8 lg:py-16 mb-16">
-  <h2 class="head-7xl text-center pb-4 lg:pb-8">
+<div class="container--medium mx-auto mb-6 lg:mb-16">
+  <h2 class="head-7xl text-center mb-6 xl:mb-28">
     Co právě děláme
   </h2>
-  <div class="mb-8 flex flex-wrap justify-center">
+  <div class="flex flex-wrap justify-center mb-8 lg:mb-24">
     <div class="w-full max-w-xs">
       {{> molecules-twitter-box }}
     </div>

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

@@ -158,7 +158,7 @@
 }
 
 .head-7xl {
-  @apply text-3xl font-bold uppercase lg:text-7xl;
+  @apply text-3xl font-medium uppercase lg:text-7xl;
 }
 
 
@@ -176,16 +176,21 @@ p {
   margin: 0 auto;
   position: relative;
   .header-carousel--text {
-    @apply text-3xl uppercase font-bold lg:text-7xl;
+    @apply text-2xl uppercase font-medium lg:text-7xl;
     position: absolute;
-    top: 40%;
+    top: 20%;
     left: 10%;
     max-width: 1200px;
+    @screen sm {
+      top: 35%;
+    }
+    @screen lg {
+      top: 45%;
+    }
   }
 
 
   img {
-    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
     bottom: 0;
     top: 0;
     left: 0;
@@ -194,6 +199,10 @@ p {
     transition: all 800ms ease-in-out;
     transform: scale(1.15, 1.15);
   }
+
+  .slick-slide {
+    clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
+  }
   .slick-active {
     img {
       transform: scale(1, 1);
@@ -215,18 +224,26 @@ p {
   .slick-arrow {
     font-size: 0;
     position: absolute;
-    top: 70%;
+    top: 80%;
     right: 10%;
     z-index: 10;
 
+    @screen lg {
+      top: 60%;
+    }
+
     &:before, &:after {
       color: white;
       border-right: 2px solid white;
       border-bottom: 2px solid white;
       content: '';
       position: absolute;
-      width: 16px;
-      height: 16px;
+      width: .8rem;
+      height: .8rem;
+      @screen lg {
+        width: 1rem;
+        height: 1rem;
+      }
     }
 
     &.slick-next {
@@ -240,7 +257,7 @@ p {
     position: absolute;
     left: 5%;
     color: white;
-    top: 70%;
+    top: 60%;
     z-index: 10;
 
     li {

main/styleguide/source/js/components/header/HeaderCarousel.vue

 <template>
-  <div class="header-carousel">
+  <div class="header-carousel mb-8 xl:mb-32">
     <vue-slick-carousel v-bind="settings">
       <div class="xl:h-screen relative">
         <img src="https://unsplash.it/792/387?image=4" draggable="false">
         <div class="header-carousel--text">
-          <h1>72% domácností bylo</h1>
-          <h1 class="text-green-500">násilně digitalizováno</h1>
+          <h1 class="text-white">72% domácností bylo</h1>
+          <h1 class="text-orange-250">násilně digitalizováno</h1>
         </div>
       </div>
       <div class="xl:h-screen relative">
         <img src="https://unsplash.it/792/387?image=1" draggable="false">
         <div class="header-carousel--text">
-          <h1>72% domácností bylo</h1>
-          <h1 class="text-green-500">násilně digitalizováno</h1>
+          <h1 class="text-white">72% domácností bylo</h1>
+          <h1 class="text-orange-250">násilně digitalizováno</h1>
         </div>
       </div>
       <!--      <div class="homepage-item" style="background: url('https://placeimg.com/1920/1080/any?1') no-repeat center / cover">-->

main/styleguide/tailwind.config.js

@@ -124,6 +124,7 @@ module.exports = {
             'orange': {
                 '100': '#f2d29f',
                 '200': '#f1ae7b',
+                '250': '#FEA86A',
                 '300': '#ed9654',
             },
             'violet': {