[FIX]

article detail => responsive

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

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

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

@@ -2,6 +2,7 @@
   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">
   <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-lg sm:text-3xl text-green-500 mb-4 font-medium sm:mb-8">
@@ -13,4 +14,5 @@
       </h1>
     </div>
   </div>
+  </div>
 </header>

main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache

 <div class="grid-container mb-2 lg:mb-12">
   <div class="grid-content">
-    <h2 class="head-4xl">
+    <h2 class="text-3xl head-4xl">
       Senát chce v souvislosti s ruskou agresí zabránit některým firmám z Ruska a Běloruska čerpat dotace z prostředků
       rozpočtu České republiky.
     </h2>

main/styleguide/source/_patterns/molecules/blocks/block-download.mustache

-<div class="grid-container px-4 mb-4 bg-grey-150 xl:mb-20">
-  <div class="flex justify-start xl:justify-end grid-left-side">
-    <i class="ico--download text-6xl mr-12 pt-5 pb-5"></i>
+<div class="grid-container flex justify-center px-4 mb-4 bg-grey-150 xl:mb-20">
+  <div class="flex justify-start grid-left-side xl:justify-end ">
+    <i class="ico--download text-5xl xl:text-6xl pt-5 pb-5 sm:text-7xl sm:mr-12"></i>
   </div>
-  <div class="grid-content flex items-center flex-wrap gap-3">
-    <div class="flex items-center bg-white p-3 h-11 mr-3">
+  <div class="grid-content flex flex-row flex-wrap gap-3 pt-8 pb-2">
+    <div class="flex whitespace-nowrap items-center bg-white p-2 h-11 mr-3 text-sm sm:p-3 sm:text-base">
       <span class="font-bold mr-1">Stáhnout soubor: </span>
       <span>prehled-tabulka.pdf</span>
     </div>

main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache

-<div class="grid-container px-4 mb-4 bg-grey-150 pt-10 lg:mb-20">
-  <div class="grid-left-side flex justify-start xl:justify-end">
-    <i class="ico--code text-7xl mr-12"></i>
+<div class="grid-container flex justify-center px-4 mb-4 bg-grey-150 pt-10 lg:mb-20">
+  <div class="grid-left-side flex justify-center xl:justify-end">
+    <i class="ico--code text-6xl sm:text-7xl sm:mr-12"></i>
   </div>
   <div class="flex flex-col grid-content">
-    <span class="head-4xl">Senát chce v souvislosti s ruskou agresí zabránit některým firmám</span>
+    <span class="text-3xl head-4xl xl:text-4xl">Senát chce v souvislosti s ruskou agresí zabránit některým firmám</span>
     <span class="font-alt text-turquoise-500 mb-6">– ADÉLA ŠÍPOVÁ, SENÁTORKA ZA PIRÁTY</span>
   </div>
 </div>