[FIX] some fixes to article page

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

+<div class="grid-container mb-12">
+  <div class="col-start-1 col-end-2 h-full bg-grey-150 left-tab">
+    <div class="p-6">
+      <span class="font-bold">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br>
+    </div>
+  </div>
+  <div class="col-start-2 col-end-3 leading-6">
+    <h2 class="head-xl">
+      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.
+      Plénum Senátu PČR dnes schválilo usnesení Stálé komise Senátu pro dohled nad poskytováním veřejných prostředků k
+      urychlené tvorbě zákona,
+      který zamezí poskytování dotací, pobídek, úvěrů a veřejných zakázek z rozpočtu ČR firmám a občanům Ruské federace
+      a Běloruska,
+      kteří neodsoudí akt vojenské agrese vůči Ukrajině.
+    </h2>
+  </div>
+  <div class="col-start-3 col-end-3 h-full bg-grey-150 right-tab"></div>
+</div>

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

@@ -2,9 +2,11 @@
   class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full"
   style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')"
 >
-  <div class="grid-container pt-16">
-    <div class="col-start-4 col-end-13">
-    <span class="mb-4 text-3xl text-green-500">2.3.2022</span>
+  <div class="grid-container header-max-width pt-16">
+    <div class="col-start-2 col-end-13">
+      <div class="text-3xl text-green-500 mb-8">
+        <span>2.3.2022</span>
+      </div>
       <h1 class="font-alt text-white 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ě

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

+<div class="grid-container mb-12">
+  <div class="col-start-2 col-end-3">
+    <h2 class="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>
+    <p class="mb-12">
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+      aperiam,
+      eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est laborum
+      et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste
+      natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+      veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+      aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+      eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+      nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
+      vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
+      eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+      praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
+      non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
+      harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
+      voluptatem accusantium doloremque laudantium…
+    </p>
+  </div>
+</div>

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

-<div class="grid-container bg-grey-200 py-4 mb-20 bg-grey-150">
-  <div class="col-start-1 col-end-4 flex justify-end">
+<div class="grid-container py-4 mb-20 bg-grey-150">
+  <div class="col-start-1 col-end-2 flex justify-end">
     <i class="ico--download text-6xl mr-12 pt-5 pb-5"></i>
   </div>
-  <div class="col-start-4 col-end-13 flex items-center">
+  <div class="col-start-2 col-end-4 flex items-center">
     <div class="flex items-center bg-white p-3 h-11 mr-3">
       <span class="font-bold mr-1">Stáhnout soubor: </span>
       <span>prehled-tabulka.pdf</span>

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

-<div class="grid-container bg-grey-200 mb-20 bg-grey-150">
-  <div class="col-start-4 col-end-13 flex">
+<div class="grid-container mb-20 bg-grey-150">
+  <div class="col-start-2 col-end-4 flex">
     <img src="https://i.picsum.photos/id/547/480/300.jpg?hmac=Y7cmYUqM4jIvrQzzO8VTM0oiedlqvSPOzXH_iRSK87w" alt="" class="max-w-md mr-10">
     <div class="flex flex-col justify-between">
       <a href="" class="mt-8 font-bold hover:no-underline leading-5">

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

-<div class="grid-container bg-grey-200 py-4 mb-20 bg-grey-150 pt-10">
-  <div class="col-start-1 col-end-4 flex justify-end">
+<div class="grid-container py-4 mb-20 bg-grey-150 pt-10">
+  <div class="col-start-1 col-end-2 flex justify-end">
     <i class="ico--code text-7xl mr-12"></i>
   </div>
-  <div class="flex flex-col col-start-4 col-end-12">
+  <div class="flex flex-col col-start-2 col-end-4">
     <span class="head-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 class="col-start-12 col-end-13 h-full bg-grey-200 right-tab"></div>
 </div>

main/styleguide/source/_patterns/organisms/header.mustache

 <!-- Navbar -->
 <nav class="bg-black xl:duration-200 xl:bg-transparent xl:absolute xl:z-50 xl:w-full hover:bg-black">
   <!-- Flex container -->
-  <div class="relative main-menu grid items-center justify-between xl:container xl:mx-auto xl:p-6">
+  <div class="relative main-menu grid items-center justify-around xl:p-6">
     <!-- Logo -->
     <a href="" class="flag bg-white m-3 p-1 main-menu__logo">
       <img src="../../images/logo-full-black.svg" alt="">

main/styleguide/source/_patterns/templates/article-detail.mustache

@@ -3,135 +3,14 @@
 {{> molecules-article-photo-header }}
 
 <main role="main" class="mb-32">
-  <div class="grid-container mb-12">
-    <div class="col-start-1 col-end-4 h-full bg-grey-150 left-tab">
-      <div class="p-6">
-      <span class="font-bold">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br>
-      </div>
-    </div>
-    <div class="col-start-4 col-end-12 leading-6">
-      <h2 class="head-xl">
-        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.
-        Plénum Senátu PČR dnes schválilo usnesení Stálé komise Senátu pro dohled nad poskytováním veřejných prostředků k urychlené tvorbě zákona,
-        který zamezí poskytování dotací, pobídek, úvěrů a veřejných zakázek z rozpočtu ČR firmám a občanům Ruské federace a Běloruska,
-        kteří neodsoudí akt vojenské agrese vůči Ukrajině.
-      </h2>
-    </div>
-    <div class="col-start-12 col-end-13 h-full bg-grey-150 right-tab"></div>
-  </div>
-  <div class="grid-container mb-12">
-    <div class="col-start-4 col-end-12">
-      <p class="mb-12">
-        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
-        aperiam,
-        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est laborum
-        et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste
-        natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
-        veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
-        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
-        eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
-        nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
-        vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
-        eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
-        praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
-        non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
-        harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
-        voluptatem accusantium doloremque laudantium…
-      </p>
-    </div>
-  </div>
+  {{> molecules-article-perex }}
+  {{> molecules-article-richtext-content }}
   {{> molecules-block-quote }}
-  <div class="grid-container mb-12">
-    <div class="col-start-4 col-end-12">
-      <h2 class="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>
-      <p>
-        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
-        aperiam,
-        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est
-        laborum
-        et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste
-        natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
-        inventore
-        veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
-        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
-        numquam
-        eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
-        nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
-        vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
-        dolorem
-        eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui
-        blanditiis
-        praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
-        cupiditate
-        non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
-        harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
-        voluptatem accusantium doloremque laudantium…
-      </p>
-    </div>
-  </div>
+  {{> molecules-article-richtext-content }}
   {{> molecules-block-download }}
-  <div class="grid-container mb-12">
-    <div class="col-start-4 col-end-12">
-      <p>
-        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
-        aperiam,
-        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est
-        laborum
-        et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste
-        natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
-        inventore
-        veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
-        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
-        numquam
-        eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
-        nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
-        vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
-        dolorem
-        eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui
-        blanditiis
-        praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
-        cupiditate
-        non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
-        harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
-        voluptatem accusantium doloremque laudantium…
-      </p>
-    </div>
-  </div>
+  {{> molecules-article-richtext-content }}
   {{> molecules-block-image }}
-  <div class="grid-container mb-12">
-    <div class="col-start-4 col-end-12">
-      <p>
-        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
-        aperiam,
-        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est
-        laborum
-        et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste
-        natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
-        inventore
-        veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
-        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
-        numquam
-        eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
-        nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
-        vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
-        dolorem
-        eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui
-        blanditiis
-        praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
-        cupiditate
-        non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
-        harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
-        voluptatem accusantium doloremque laudantium…
-      </p>
-    </div>
-  </div>
+  {{> molecules-article-richtext-content }}
 </main>
 
 {{> organisms-newsletter-section }}

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

@@ -21,10 +21,15 @@
   clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0% 100%);
 }
 
+.header-max-width {
+  max-width: 1340px !important;
+}
+
 .grid-container {
-  @apply grid grid-cols-12;
+  @apply grid;
+  grid-template-columns: 240px 1fr 102px;
   margin-left: 10%;
-  max-width: 1300px;
+  max-width: 1150px;
 
   .left-tab {
     margin-right: 1.5rem;