Responsive article detail

source/_patterns/01-molecules/sharebox/sharebox.mustache

 <div class="sharebox card elevation-10 {{ classes }}">
   <div class="card__body p-8">
-    <span class="head-alt-md">Sdílení je aktem lásky</span>
+    <span class="head-alt-base md:head-alt-md">Sdílení je aktem lásky</span>
 
-    <div class="flex w-full space-x-4 pt-8 text-center text-white">
-      <a href="#" class="bg-brands-facebook px-8 py-4 text-xl w-full"><i class="fab fa-facebook-f"></i></a>
-      <a href="#" class="bg-brands-twitter px-8 py-4 text-xl w-full"><i class="fab fa-twitter"></i></a>
+    <div class="flex w-full space-x-4 pt-4 md:pt-8 text-center text-white">
+      <a href="#" class="bg-brands-facebook px-8 py-3 text-2xl w-full"><i class="fab fa-facebook-f"></i></a>
+      <a href="#" class="bg-brands-twitter px-8 py-3 text-2xl w-full"><i class="fab fa-twitter"></i></a>
     </div>
   </div>
-  <div class="h-52 overflow-hidden">
+  <div class="h-52 overflow-hidden hidden md:block">
     <img src="/images/flag.png" alt="Pirátská strana" class="w-80 object-cover m-auto" />
   </div>
 </div>

source/_patterns/02-organisms/02-articles/article-card-list.mustache

@@ -2,7 +2,9 @@
   {{> molecules-emphasized-article-card }}
   {{> molecules-article-card }}
   {{> molecules-emphasized-article-card }}
+  {{^ onlyThree }}
   {{> molecules-article-card }}
   {{> molecules-emphasized-article-card }}
   {{> molecules-article-card }}
+  {{/ onlyThree }}
 </div>

source/_patterns/03-templates/article-detail.mustache

 {{> organisms-header }}
 
-<div class="container container--default py-24">
+<div class="container container--default py-8 lg:py-24">
   <article>
-    <h1 class="head-alt-lg max-w-5xl mb-4">Senátor Lukáš Wagenknecht žádá nastavení pravidel proti střetu zájmů</h1>
-    <div class="flex items-center">
+    <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-4">Senátor Lukáš Wagenknecht žádá nastavení pravidel proti střetu zájmů</h1>
+    <div class="flex flex-col md:flex-row md:items-center">
       <div class="inline-flex divide-x flex-grow">
         <span class="pr-2">{{ dateverbose }}</span>
         <span class="pl-2">{{ organization.name }}</span>
@@ -15,19 +15,19 @@
     </div>
     {{> atoms-figure(caption: "Popisek fotky") }}
 
-    <div class="flex mt-8 space-x-8">
-      <div class="w-2/3">
+    <div class="lg:flex mt-8 lg:space-x-8">
+      <div class="lg:w-2/3">
         {{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
       </div>
-      <div class="w-1/3">
+      <div class="pt-8 lg:w-1/3 md:pt-0">
         {{> molecules-sharebox }}
       </div>
     </div>
   </article>
 
-  <section class="mt-24">
-    <h1 class="head-alt-md pb-4">Další podobné články</h1>
-    {{> organisms-article-card-list }}
+  <section class="mt-16 md:mt-24">
+    <h1 class="head-alt-base md:head-alt-md pb-4">Další podobné články</h1>
+    {{> organisms-article-card-list(onlyThree: true) }}
     <div class="text-center mt-8">
       {{> atoms-icon-button(cta: "Zobrazit další", classes: "text-xl", icon: "fas fa-chevron-right") }}
     </div>