[ADD] align header carousel text

main/styleguide/source/css/molecules/carousels.pcss

@@ -4,16 +4,19 @@
   position: relative;
 
   .header-carousel--text {
-    @apply font-alt text-2xl uppercase lg:text-7xl;
-    left: 10%;
+    @apply font-alt text-2xl sm:text-5xl uppercase lg:text-7xl;
     max-width: 1200px;
     position: absolute;
-    top: 20%;
+    top: 35%;
+    margin-left: 15%;
 
     @screen sm {
-      top: 35%;
+      margin-left: 10%;
     }
     @screen lg {
+      top: 30%;
+    }
+    @screen 2xl {
       top: 45%;
     }
   }
@@ -34,21 +37,22 @@
   }
 
   .slick-active {
+    z-index: 1000;
     img {
       transform: scale(1, 1);
     }
 
     .header-carousel--text {
-      animation: right_to_left 500ms ease;
+      animation: right_to_left 1s ease;
     }
   }
 
   @keyframes right_to_left {
     from {
-      left: 15%;
+      margin-left: 20%;
     }
     to {
-      left: 10%;
+      margin-left: 10%;
     }
   }
 

main/styleguide/source/css/molecules/sliding_button.pcss

 .btn {
-  @apply font-alt inline-block h-11 leading-9 py-1;
+  @apply font-alt inline-flex justify-center items-center h-8 leading-9 py-1 xl:h-11;
 }
 
 .btn__slide__wrap {

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

@@ -3,18 +3,50 @@
     <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">
+        <div class="header-carousel--text grid-container">
+          <div class="grid-content-with-right-side">
             <h1 class="text-white">72% domácností bylo</h1>
             <h1 class="text-orange-250">násilně digitalizováno</h1>
+            <a href="" class="btn btn__slide__wrap ">
+              <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více1</span>
+              <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více1</span>
+            </a>
+          </div>
         </div>
       </div>
       <div class="xl:h-screen relative">
-        <img src="https://unsplash.it/792/387?image=1" draggable="false">
-        <div class="header-carousel--text">
+        <img src="https://unsplash.it/792/387?image=4" draggable="false">
+        <div class="header-carousel--text grid-container">
+          <div class="grid-content-with-right-side">
             <h1 class="text-white">72% domácností bylo</h1>
             <h1 class="text-orange-250">násilně digitalizováno</h1>
+            <a href="" class="btn btn__slide__wrap ">
+              <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více2</span>
+              <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více2</span>
+            </a>
+          </div>
         </div>
       </div>
+      <div class="xl:h-screen relative">
+        <img src="https://unsplash.it/792/387?image=4" draggable="false">
+        <div class="header-carousel--text grid-container">
+          <div class="grid-content-with-right-side">
+            <h1 class="text-white">72% domácností33 bylo</h1>
+            <h1 class="text-orange-250">násilně digitalizováno</h1>
+            <a href="" class="btn btn__slide__wrap ">
+              <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
+              <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
+            </a>
+          </div>
+        </div>
+      </div>
+<!--      <div class="xl:h-screen relative">-->
+<!--        <img src="https://unsplash.it/792/387?image=1" draggable="false">-->
+<!--        <div class="header-carousel&#45;&#45;text">-->
+<!--          <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">-->
       <!--        <div class="container">-->
       <!--          <h1 class="head-8xl">72% domácností bylo</h1>-->