[ADD] responsive article detail

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="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">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br>
     </div>
   </div>
-  <div class="col-start-2 col-end-3 leading-6">
+  <div class="grid-content 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.
@@ -15,5 +15,5 @@
       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 class="hidden grid-right-side h-full bg-grey-150 right-tab xl:block"></div>
 </div>

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

-<div class="grid-container mb-12">
-  <div class="col-start-2 col-end-3">
+<div class="grid-container mb-2 lg:mb-12">
+  <div class="grid-content">
     <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">
+    <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

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

-<div class="grid-container py-4 mb-20 bg-grey-150">
-  <div class="col-start-1 col-end-2 flex justify-end">
+<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>
-  <div class="col-start-2 col-end-4 flex items-center">
+  <div class="grid-content flex items-center flex-wrap gap-3">
     <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 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="grid-container px-3 pt-3 mb-4 bg-grey-150 xl:pt-0 xl:mb-20">
+  <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5">
+    <img src="https://i.picsum.photos/id/547/480/300.jpg?hmac=Y7cmYUqM4jIvrQzzO8VTM0oiedlqvSPOzXH_iRSK87w" alt="" class="w-full max-w-sm">
     <div class="flex flex-col justify-between">
-      <a href="" class="mt-8 font-bold hover:no-underline leading-5">
+      <a href="" class="mt-0 xl:mt-8 mb-2 font-bold hover:no-underline leading-5">
         Et harum quidem rerum facilis est et expedita distinctio.
       </a>
-      <span class="text-sm text-grey-200 uppercase mb-6">zdroj: www.internet.cz</span>
+      <span class="text-sm text-grey-200 uppercase mb-0 xl:mb-6">zdroj: www.internet.cz</span>
     </div>
   </div>
 </div>

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

-<div class="grid-container py-4 mb-20 bg-grey-150 pt-10">
-  <div class="col-start-1 col-end-2 flex justify-end">
+<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>
-  <div class="flex flex-col col-start-2 col-end-4">
+  <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="font-alt text-turquoise-500 mb-6">– ADÉLA ŠÍPOVÁ, SENÁTORKA ZA PIRÁTY</span>
   </div>

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

@@ -2,7 +2,7 @@
 
 {{> molecules-article-photo-header }}
 
-<main role="main" class="mb-32">
+<main role="main" class="mb-10 xl:mb-32">
   {{> molecules-article-perex }}
   {{> molecules-article-richtext-content }}
   {{> molecules-block-quote }}

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

@@ -35,17 +35,41 @@
 }
 
 .grid-container {
-  @apply grid;
+  @apply grid mx-5;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+  "left-side"
+  "content"
+  "right-side";
+  gap: 1rem;
+  max-width: 1150px;
+}
+@responsive {
+  .grid-container {
+    @screen xl {
       grid-template-columns: 240px 1fr 102px;
+      grid-template-areas:
+      "left-side content right-side";
       margin-left: 10%;
-  max-width: 1150px;
+    }
+  }
+}
+
+.grid-content {
+  grid-area: content;
+}
 
-  .left-tab {
-    margin-right: 1.5rem;
+.grid-left-side {
+  grid-area: left-side;
 }
-  .right-tab {
-    margin-left: 1.5rem;
+
+.grid-right-side {
+  grid-area: right-side;
 }
+
+.grid-content-with-right-side {
+  grid-column-start: content;
+  grid-column-end: right-side;
 }
 
 @responsive {

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

@@ -146,7 +146,7 @@
 
 
 .head-xl {
-  @apply text-xl font-bold leading-7 uppercase;
+  @apply text-base lg:text-xl font-bold leading-7 uppercase;
 }
 
 .head-2xl {