[FIX]

Homepage => responsive

main/styleguide/source/_patterns/molecules/articles/article-perex.mustache

 <div class="grid-container mb-2 lg:mb-12">
   <div class="grid-left-side h-full bg-grey-150 left-tab">
-    <div class="p-6">
-      <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br>
+    <div class="p-6 flex flex-wrap justify-between">
+      <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span>
+      <span>
+        <div class="flex flex-row">
+            <a href="" class="flex hover:no-underline">
+              <i class="ico--facebook mr-1"></i>
+            </a>
+            <a href="" class="flex hover:no-underline">
+              <i class="ico--twitter mr-1"></i>
+            </a>
+            <a href="" class="flex hover:no-underline">
+              <i class="ico--instagram mr-1"></i>
+            </a>
+          </div>
+      </span>
     </div>
   </div>
   <div class="grid-content leading-6">

main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache

@@ -2,12 +2,12 @@
   class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center"
   style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')"
 >
-  <div class="grid-container header-max-width pt-16">
+  <div class="grid-content-with-right-side header-max-width pt-40 sm:pt-0">
     <div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0">
-      <div class="text-3xl text-green-500 mb-8">
+      <div class="text-lg sm:text-3xl text-green-500 mb-4 font-medium sm:mb-8">
         <span>2.3.2022</span>
       </div>
-      <h1 class="font-alt text-white text-3xl md:text-5xl lg:text-6xl">
+      <h1 class="font-alt text-white text-3xl md:text-5xl leading-9 sm:leading-none lg:text-6xl">
         Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska a Běloruska, vkteré neodsoudí akt vojenské agrese na
         Ukrajině
       </h1>

main/styleguide/source/_patterns/molecules/box-link.mustache

-<div class="mb-2 w-96 h-72 flex bg-white flex-col items-center justify-center mr-1 drop-shadow-xl">
+<div class="m-1 w-96 h-72 flex bg-white flex-col items-center justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80">
   <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8 max-w-20 max-h-20">
   <h5 class="head-4xl mb-8">naloď se k pirátům</h5>
   {{> atoms-button-animated(btn-text: "Přidat se k nám") }}

main/styleguide/source/_patterns/organisms/box-links-section.mustache

 <div class="bg-cover bg-no-repeat section-clip py-16 lg:py-36"
      style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
-  <div class="container-collapsible">
+  <div class="container--wide mx-auto">
     <h2 class="head-7xl text-center mb-6 xl:mb-28">
       Piráti zastupují občany
     </h2>
-    <div class="flex flex-wrap flex-col justify-center items-center md:flex-row">
+    <div class="flex flex-wrap justify-center items-center md:flex-row">
       {{> molecules-box-link }}
       {{> molecules-box-link }}
       {{> molecules-box-link }}

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

 <div class="container--wide mx-auto mb-8 lg:mb-16">
-  <div class="flex flex-wrap justify-center">
-    <h2 class="w-full flex max-w-xs head-7xl text-left mb-6 sm:text-center xl:mb-28">
+  <div class="flex flex-wrap justify-center items-center">
+    <h2 class="w-full justify-center flex head-7xl text-center mb-6 xl:mb-28">
     Co právě děláme
   </h2>
   </div>

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

@@ -17,9 +17,9 @@
 }
 
 .photo-header {
-  height: 36rem;
+  height: 414px;
 
-  @screen xl {
+  @screen md {
     height: 40vw;
   }
 

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

@@ -140,7 +140,7 @@
 
 
 .header-clip {
-  clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
+  clip-path: polygon(0 0, 100% 0, 100% 96%, 0% 100%);
 }
 
 

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

@@ -39,13 +39,14 @@
       top: 35%;
     }
     @screen lg {
-      top: 30%;
+      top: 25%;
     }
     @screen xl {
     margin-left: 15%;
+    top: 30%;
     }
     @screen 2xl {
-      top: 45%;
+      top: 40%;
     }
   }
 
@@ -62,7 +63,7 @@
     object-fit: cover;
     margin-bottom: -3px;
 
-    @screen sm {
+    @screen md {
       height: auto;
     }
   }