source/_patterns/01-molecules/21-modal/modal.mustache

+<div class="modal__overlay hidden toggle-modal-sample-1" id="modal-sample-1">
+  <div class="modal__content" role="dialog">
+    <div class="modal__container w-full max-w-2xl" role="dialog">
+      <div class="modal__container-body elevation-10">
+        <button class="modal__close" title="Zavřít"><i class="ico--cross"></i></button>
+        {{> molecules-image-card }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<button class="toggle-modal-sample-1">Toggle modal</button>
+
+<script>
+  var toggles = document.getElementsByClassName("toggle-modal-sample-1");
+  var modal = document.getElementById("modal-sample-1");
+
+  for (var i = 0; i < toggles.length; i++) {
+    toggles[i].addEventListener("click", function () {
+      modal.classList.toggle("hidden");
+    })
+
+  }
+
+</script>

source/_patterns/01-molecules/22-images/images.mustache

+{{> atoms-image(classes: "mx-auto my-6 lg:max-w-[800px] max-w-full object-contain") }}
+{{> atoms-image(classes: "float-left mr-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }}
+{{> atoms-image(classes: "float-left mr-4 mb-6 object-contain") }}
+{{> atoms-image(classes: "float-right ml-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }}
+{{> atoms-image(classes: "float-right ml-4 mb-6 object-contain") }}

source/_patterns/02-organisms/00-global/subnav.mustache

@@ -45,11 +45,11 @@
           </nav>
           <aside class="subnav-aside">
             <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
-              <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--close"></i></a>
+              <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--cross"></i></a>
               <ui-region-map class="container container--default"></ui-region-map>
             </div>
             <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
-              <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--close"></i></a>
+              <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--cross"></i></a>
               <div class="container container--default">
                   <ui-calendar-renderer :events="events" :on-show-more="onShowMore" :has-more="hasMore" :name="'Krajský kalendář'"></ui-calendar-renderer>
               </div>

source/_patterns/02-organisms/01-navbar/navbar.mustache

@@ -28,25 +28,34 @@
                 <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Lidé">
+                <ui-navbar-subitem-replacing label="Lidé" items="[[&quot;Delší link co je delší než hlavní menu položka&quot;, &quot;{{ link.templates-people }}&quot;]]">
+                  <span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
+                  <div class="navbar-menu__submenu-wrap">
                     <ul class="navbar-menu__submenu">
                       <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
                     </ul>
-                </ui-navbar-subtitem>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
+                <ui-navbar-subitem-replacing label="Aktuality" href="{{ link.templates-article-listing }}" items="[[&quot;Detail aktuality&quot;, &quot;{{ link.templates-article-detail }}&quot;]]">
+                  <a href="{{ link.templates-article-listing }}" class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</a>
+                  <div class="navbar-menu__submenu-wrap">
                     <ul class="navbar-menu__submenu">
                       <li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
                     </ul>
-                </ui-navbar-subtitem>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Volby">
+                <ui-navbar-subitem-replacing label="Volby" items="[[&quot;Volební rozcestník&quot;, &quot;{{ link.templates-elections }}&quot;]]">
+                  <span class="navbar-menu__link navbar-menu__submenu-toggle">Volby</span>
+                  <div class="navbar-menu__submenu-wrap">
                     <ul class="navbar-menu__submenu">
                       <li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volební rozcestník</a></li>
                     </ul>
-                </ui-navbar-subtitem>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
                 <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>

source/_patterns/02-organisms/02-simplified-footer/simplified-footer.mustache

+<footer class="border-t border-grey-125 pt-4 flex flex-col md:flex-row md:justify-between space-y-4">
+  <img src="/images/logo-full-black.svg" class="w-32" alt="Pirátská strana" />
+  <p>Piráti, 2021. Všechna práva vyhlazena.</p>
+</footer>

source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-avatar.mustache

@@ -18,9 +18,19 @@
             <div class="flex-grow">
               {{> molecules-navbar-menu }}
             </div>
+          </div>
+          <div class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center">
+            <div class="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
+              <span class="relative inline-flex h-4 w-4 mr-4" title="Jsi online">
+                <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
+                <span class="inline-flex rounded-full w-4 h-4 bg-green-400"></span>
+              </span>
+              <span class="hidden md:block text-grey-200">Jsi online</span>
+            </div>
             <div class="flex items-center space-x-4">
               <span class="head-heavy-2xs">{{ person.first }} {{ person.last }}</span>
               {{> atoms-basic-avatar(classes: "avatar--2xs") }}
+              <button class="text-grey-200 hover:text-white"><i class="ico--log-out"></i></button>
             </div>
           </div>
         </div>

source/_patterns/02-organisms/03-hero/elections-hero-multiple-candidacies.mustache

+<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
+    <div class="lg:row-span-2 lg:col-span-3 order-1">
+      {{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
+      <h1 class="head-alt-lg md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
+    </div>
+    <div class="lg:row-span-1 lg:col-span-3 order-3">
+      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
+      </div>
+    </div>
+    <div class="lg:row-span-3 lg:col-span-4 order-2">
+      <img src="/images/hero-profile-img.png" class="h-32 lg:h-80 lg:m-auto hidden md:block object-contain" />
+    </div>
+  </div>
+  <div class="container container--default text-white text-center md:text-left">
+    <hr class="hr--big opacity-25" />
+    <div class="leading-loose grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 text-shadow-lg text-base md:text-sm">
+      <span><a href="#" class="font-bold">Radnice</a></span>
+      <span><a href="#">Praha 1</a></span>
+      <span><a href="#">Praha 2</a></span>
+      <span><a href="#">Praha 3</a></span>
+      <span><a href="#">Praha 4</a></span>
+      <span><a href="#">Praha 5</a></span>
+      <span><a href="#">Praha 6</a></span>
+      <span><a href="#">Praha 7</a></span>
+      <span><a href="#">Praha 8</a></span>
+      <span><a href="#">Praha 9</a></span>
+      <span><a href="#">Praha 10</a></span>
+      <span><a href="#">Praha 11</a></span>
+      <span><a href="#">Praha 12</a></span>
+    </div>
+  </div>
+</article>

source/_patterns/02-organisms/03-hero/elections-hero.mustache

 <article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
-  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
+  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
     <div class="lg:row-span-2 lg:col-span-3 order-1">
       {{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
-      <h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1>
+      <h1 class="head-alt-lg md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
-      <div class="mt-4 md:mt-8 space-y-4">
-        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
-        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
+      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
       </div>
     </div>
     <div class="lg:row-span-3 lg:col-span-4 order-2">

source/_patterns/02-organisms/03-hero/hero.mustache

 <article class="hero {{ classes }}">
-  <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
+  <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
     <div class="lg:row-span-4 lg:col-span-3 order-1">
       <h1 class="head-alt-md sm:head-alt-lg md:head-alt-xl">{{ claim }}{{^ claim }}Piráti<br>Pardubického<br>kraje{{/ claim }}</h1>
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
       <div class="mt-4 md:mt-8">
-        {{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "ico--chevron-right") }}
+        {{> atoms-icon-button(classes: "btn--black block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg", icon: "ico--chevron-right") }}
       </div>
     </div>
     <div class="lg:row-span-5 lg:col-span-4 order-2">

source/_patterns/02-organisms/03-hero/home-hero.mustache

 <article class="hero py-8 lg:py-16 {{ classes }}">
-  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
+  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
     <div class="lg:row-span-2 lg:col-span-3 order-1">
-      <h1 class="head-alt-md md:head-alt-xl">Piráti Pardubického kraje</h1>
+      <h1 class="head-alt-lg md:head-alt-xl">Piráti Pardubického kraje</h1>
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
-      <div class="mt-4 md:mt-8 space-y-4">
-        {{> atoms-icon-button(icon: "ico--chevron-right", classes: "btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
+      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
+        {{> atoms-icon-button(icon: "ico--chevron-right", classes: "block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg") }}
       </div>
     </div>
     <div class="lg:row-span-3 lg:col-span-4 order-2">

source/_patterns/02-organisms/03-hero/image-hero.mustache

-<article class="hero hero--image {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
-  <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
-    <div class="lg:row-span-4 lg:col-span-3 order-1">
-      <h1 class="head-alt-md md:head-alt-xl">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
-    </div>
-    <div class="lg:row-span-1 lg:col-span-3 order-3">
-      <div class="mt-4 md:mt-8 space-y-4">
-        {{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
-        {{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
-      </div>
-    </div>
-    <div class="lg:row-span-5 lg:col-span-4 order-2">
-      <img src="/images/hero-profile-img.png" />
+<article class="hero hero--image hero--condensed {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+  <div class="container text-center">
+    <h1 class="head-alt-md md:head-alt-xl text-shadow-lg">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
+    <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
+      {{> atoms-basic-button(classes: "btn--white btn--autowidth text-sm md:text-lg") }}
     </div>
   </div>
 </article>

source/_patterns/02-organisms/08-event-feed/event-feed-with-action-menu.mustache

+{{> organisms-event-feed(withActionMenu: true) }}

source/_patterns/02-organisms/08-event-feed/event-feed.mustache

-<div class="flex flex-col flex-1 overflow-hidden {{ classes }}{{^ classes }}h-64 max-w-lg{{/ classes }}">
-  <div class="overflow-hidden flex flex-1">
-    <div class="overflow-scroll h-full space-y-px">
-      <div class="bg-yellow-100 p-3 border-orange-300 border-l-4">
+<div class="space-y-px {{ classes }}">
+  <div class="bg-yellow-100 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500 bg-opacity-50 ">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:55</div>
         {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
       </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
         </div>
-        <span class="leading-tight">{{ excerpt.short }}</span>
+      {{/ withActionMenu }}
     </div>
-      <div class="bg-grey-50 p-3 bg-yellow-100 border-green-300 border-l-4">
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
+  </div>
+  <div class="bg-yellow-100 border-green-400 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500 bg-opacity-50">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:52</div>
-            {{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
+        {{> molecules-chip(classes: "chip--green-400 chip--condensed", cta: "Schválený návrh postupu")}}
+      </div>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
         </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
+      {{/ withActionMenu }}
     </div>
-        <span class="leading-tight">{{ excerpt.short }}</span>
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
   </div>
-      <div class="bg-grey-50 p-3 border-blue-300 border-l-4">
+  <div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:51</div>
         {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
       </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
+            </li>
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
         </div>
-        <span class="leading-tight">{{ excerpt.short }}</span>
+      {{/ withActionMenu }}
     </div>
-      <div class="bg-grey-50 p-3 border-red-600 border-l-4">
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
+  </div>
+  <div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:43</div>
         {{> molecules-chip(classes: "chip--red-600 chip--condensed font-bold text-xs", cta: "Rozhodující hlasování")}}
         <a href="#" class="ml-auto p-1 text-xs text-red-600 font-bold">Hlasovat v Heliosu &raquo;</a>
       </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
+            </li>
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
     </div>
-        <span class="leading-tight mb-2">{{ excerpt.short }}</span>
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
   </div>
-      <div class="bg-grey-50 p-3 border-cyan-500 border-l-4">
+  <div class="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:35</div>
         {{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "Oznámení předsedajícího")}}
       </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
+            </li>
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
         </div>
-        <span class="leading-tight">{{ excerpt.short }}</span>
+      {{/ withActionMenu }}
     </div>
-      <div class="bg-grey-50 p-3 border-orange-300 border-l-4">
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
+  </div>
+  <div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:28</div>
         {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
       </div>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
     </div>
-        <span class="leading-tight">{{ excerpt.short }}</span>
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
   </div>
-      <div class="bg-grey-50 p-3 border-black border-l-4">
+  <div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
     <div class="flex items-center justify-between mb-2">
       <div class="space-x-2 flex items-center">
         <div class="font-bold text-sm">11:28</div>
         {{> molecules-chip(classes: "chip--black chip--condensed", cta: "Zablokovaný účastník")}}
       </div>
-          {{# action }}
-            <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
-          {{/ action}}
-        </div>
-        <span class="leading-tight"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
         </div>
+      {{/ withActionMenu }}
     </div>
+    <span class="leading-tight text-sm lg:text-base"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
   </div>
 </div>

source/_patterns/02-organisms/10-loading-screen/loading-screen.mustache

+<div class="h-screen w-screen flex justify-center items-center">
+  <div class="text-center">
+    <img
+      src="/images/logo-round-black.svg"
+      class="w-24 mb-2 inline-block"
+      alt="Pirátská strana"
+    />
+    <h1 class="head-alt-lg mb-2">Název aplikace</h1>
+    <p class="text-lg">Načítám aplikaci ...</p>
+  </div>
+</div>

source/_patterns/02-organisms/11-vertical-navbar/vertical-navbar.mustache

+<div class="vertical-navbar">
+  <ul class="vertical-navbar__items">
+    <li class="vertical-navbar__item"><a aria-current="page" href="/">Rozcestník</a></li>
+    <li class="vertical-navbar__item vertical-navbar__item--active"><a aria-current="page" href="/registrace">Registrace</a></li>
+    <li class="vertical-navbar__item"><a href="/ubytovani">Ubytování</a></li>
+    <li class="vertical-navbar__item"><a href="/mapa">Mapa</a></li>
+    <li class="vertical-navbar__item"><a href="/organizatori">Organizátoři</a></li>
+    <li class="vertical-navbar__item"><a href="/pro-dobrovolniky">Pro dobrovolníky</a></li>
+  </ul>
+</div>

source/_patterns/02-organisms/12-chart/chart.mustache

+<div class="py-4">
+    <canvas
+      class="lg:h-120 lg:w-auto w-full mx-auto __chart-example"
+    ></canvas>
+</div>

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

 {{> organisms-header }}
 
-<article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 candidate-detail__hero {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+<article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
   <div class="container container--default text-center lg:text-left">
     <h1 class="head-alt-md md:head-alt-xl max-w-2xl">{{ person.first }} {{ person.last }}</h1>
     <h2 class="head-xs mt-2 max-w-xl">{{ person.occupation }}</h2>
@@ -11,7 +11,13 @@
   <main>
     <div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
       <section class="lg:w-3/5 xl:w-2/3">
+        <div class="mb-16">
           {{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
+        </div>
+        <div>
+          <h2 class="head-alt-md mb-3"><i class="ico--calendar mr-4"></i>Kalendář</h2>
+          {{> atoms-month-calendar() }}
+        </div>
       </section>
       <section class="lg:w-2/5 xl:w-1/3 pt-8 lg:pt-0 order-first lg:order-last candidate-detail__sidebar">
         <div class="container-padding--zero lg:card lg:elevation-10 lg:container-padding--auto">

source/_patterns/03-templates/cf2021/anonymous.mustache

 {{> organisms-simplified-navbar-with-actions }}
 
-<div class="container container--wide pt-8 lg:py-24">
-  <article>
-    <div class="flex items-center justify-between mb-8">
-      <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilování leadera</h1>
+<article class="container container--wide pt-8 lg:py-24 cf2021">
+  <div class="cf2021__title flex justify-between">
+    <h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
   </div>
 
-    <div class="grid grid-cols-3 gap-8">
-      <div class="col-span-2 space-y-8">
-        <iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+  <section class="cf2021__video space-y-8">
+    <div class="container-padding--zero md:container-padding--auto">
+      <div class="iframe-container">
+        <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      </div>
+      <div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
+        <div><strong>0</strong> <span>členů online</span></div>
+        <div><strong>0</strong> <span>online celkem</span></div>
+        <div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
+      </div>
+    </div>
+  </section>
+
+  <section class="cf2021__notifications">
+    <div class="lg:card lg:elevation-10">
+      <div class="container-padding--zero lg:container-padding--auto">
+        {{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
+      </div>
+    </div>
+  </section>
 
-        <section>
-          <div class="flex justify-between items-center mb-4">
-            <h2 class="head-alt-base whitespace-no-wrap">Příspěvky v rozpravě</h2>
-            <div class="flex items-center">
-              <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs">
+  <section class="cf2021__posts">
+    <div class="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
+      <h2 class="head-heavy-sm whitespace-no-wrap">Příspěvky v rozpravě</h2>
+      <div class="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
+        <div class="-mx-1">
+          <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
             <select>
               <option value="">Vše</option>
               <option value="">Jen aktivní</option>
@@ -22,14 +39,14 @@
             </select>
             <span class="chip__icon ico--chevron-down"></span>
           </span>
-              <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1">
+          <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
             <select>
               <option value="">Podle času</option>
               <option value="">Podle podpory</option>
             </select>
             <span class="chip__icon ico--chevron-down"></span>
           </span>
-              <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs mr-4 ml-1">
+          <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
             <select>
               <option value="">Návrhy i příspěvky</option>
               <option value="">Jen návrhy</option>
@@ -37,107 +54,184 @@
             </select>
             <span class="chip__icon ico--chevron-down"></span>
           </span>
+        </div>
 
+        <div>
           {{> molecules-chip-pagination }}
         </div>
       </div>
+    </div>
 
-          <div class="space-y-6">
-            <div class="flex items-start bg-yellow-100 p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
-              <div class="flex-1 overflow-hidden">
+    <div class="space-y-6 container-padding--zero lg:container-padding--auto">
+      <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
           <div class="mb-1">
-                  <div class="flex justify-between">
-                    <div class="flex items-center">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
                   <span class="font-bold">{{ person.first }} {{ person.last }}</span>
-                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
-                      <span class="text-grey-200 ml-1 text-sm">@ 11:46</span>
-                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
+                    <span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:46</span>
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
+                </div>
               </div>
               {{> molecules-thumbs }}
             </div>
           </div>
-                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-            <div class="flex items-start p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
-              <div class="flex-1 overflow-hidden">
+      <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
           <div class="mb-1">
-                  <div class="flex justify-between">
-                    <div class="flex items-center">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
                   <span class="font-bold">{{ person.first }} {{ person.last }}</span>
-                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
-                      <span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
-                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
+                    <span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:42</span>
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
+                </div>
               </div>
               {{> molecules-thumbs }}
             </div>
           </div>
-                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-            <div class="flex items-start p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
-              <div class="flex-1 overflow-hidden">
+      <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
           <div class="mb-1">
-                  <div class="flex justify-between">
-                    <div class="flex items-center">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
                   <span class="font-bold">{{ person.first }} {{ person.last }}</span>
-                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
-                      <span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
-                      {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
+                    <span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:40</span>
+                    <a href="#" class="text-grey-200 text-xs ml-2 underline hidden md:inline">(Upraveno přesdedajícím)</a>
+                  </div>
+                  <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                    {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
+                  </div>
+                </div>
               </div>
               {{> molecules-thumbs }}
             </div>
           </div>
-                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
-              <div class="flex-1 overflow-hidden">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
           <div class="mb-1">
-                  <div class="flex justify-between">
-                    <div class="flex items-center">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
                   <span class="font-bold">{{ person.first }} {{ person.last }}</span>
-                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
                     <span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
-                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
+                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
+                </div>
+              </div>
+              {{> molecules-thumbs }}
+            </div>
+          </div>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
+        </div>
+      </div>
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
+          <div class="mb-1">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
+                  <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
+                    <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
+                  {{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
                   {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                 </div>
+              </div>
               {{> molecules-thumbs }}
             </div>
           </div>
-                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
-              <div class="flex-1 overflow-hidden">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
           <div class="mb-1">
-                  <div class="flex justify-between">
-                    <div class="flex items-center">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
                   <span class="font-bold">{{ person.first }} {{ person.last }}</span>
-                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-sm lg:ml-2">KS Pardubický kraj</span>
                     <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
-                      {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
+                  {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Zamítnutý")}}
                   {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                 </div>
+              </div>
               {{> molecules-thumbs }}
             </div>
           </div>
-                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
+          <div class="mb-1">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
+                  <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
+                    <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
                   </div>
-        </section>
                 </div>
-      <div>
-        <h2 class="head-alt-base mb-4 pt-1">Oznámení</h2>
-        {{> organisms-event-feed(classes: "w-full") }}
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
+                  {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Odmítnutý předsedajícím")}}
+                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                 </div>
               </div>
-
-  </article>
+              {{> molecules-thumbs }}
             </div>
+          </div>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</article>

source/_patterns/03-templates/cf2021/user.mustache

 {{> organisms-simplified-navbar-with-avatar }}
 
-<div class="container container--wide pt-8 lg:py-24">
-  <article>
-    <div class="flex items-center justify-between mb-8">
-      <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilování leadera</h1>
+<article class="container container--wide pt-8 lg:py-24 cf2021">
+  <div class="cf2021__title flex justify-between">
+    <h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
   </div>
 
-    <div class="grid grid-cols-3 gap-8">
-      <div class="col-span-2 space-y-8">
-        <iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+  <section class="cf2021__video space-y-8">
+    <div class="container-padding--zero md:container-padding--auto">
+      <div class="iframe-container">
+        <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      </div>
+      <div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
+        <div><strong>0</strong> <span>členů online</span></div>
+        <div><strong>0</strong> <span>online celkem</span></div>
+        <div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
+      </div>
+    </div>
+  </section>
+
+  <section class="cf2021__notifications">
+    <div class="lg:card lg:elevation-10">
+      <div class="container-padding--zero lg:container-padding--auto">
+        {{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
+      </div>
+    </div>
+  </section>
 
-        <section>
-          <div class="flex justify-between items-center mb-4">
-            <h2 class="head-alt-base whitespace-no-wrap">Příspěvky v rozpravě</h2>
-            <div class="flex items-center">
-              <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs">
+  <section class="cf2021__posts">
+    <div class="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
+      <h2 class="head-heavy-sm whitespace-no-wrap">Příspěvky v rozpravě</h2>
+      <div class="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
+        <div class="-mx-1">
+          <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
             <select>
               <option value="">Vše</option>
               <option value="">Jen aktivní</option>
@@ -22,14 +39,14 @@
             </select>
             <span class="chip__icon ico--chevron-down"></span>
           </span>
-              <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1">
+          <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
             <select>
               <option value="">Podle času</option>
               <option value="">Podle podpory</option>
             </select>
             <span class="chip__icon ico--chevron-down"></span>
           </span>
-              <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs mr-4 ml-1">
+          <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
             <select>
               <option value="">Návrhy i příspěvky</option>
               <option value="">Jen návrhy</option>
@@ -37,115 +54,193 @@
             </select>
             <span class="chip__icon ico--chevron-down"></span>
           </span>
+        </div>
 
+        <div>
           {{> molecules-chip-pagination }}
         </div>
       </div>
+    </div>
 
-          <div class="space-y-6">
-            <div class="flex items-start bg-yellow-100 p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
-              <div class="flex-1 overflow-hidden">
+    <div class="space-y-6 container-padding--zero lg:container-padding--auto">
+      <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
           <div class="mb-1">
-                  <div class="flex justify-between">
-                    <div class="flex items-center">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
                   <span class="font-bold">{{ person.first }} {{ person.last }}</span>
-                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                     <span class="text-grey-200 ml-1 text-sm">@ 11:46</span>
-                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
+                </div>
               </div>
               {{> molecules-thumbs }}
             </div>
           </div>
-                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-            <div class="flex items-start p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
-              <div class="flex-1 overflow-hidden">
+      <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
           <div class="mb-1">
-                  <div class="flex justify-between">
-                    <div class="flex items-center">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
                   <span class="font-bold">{{ person.first }} {{ person.last }}</span>
-                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                     <span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
-                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
+                </div>
               </div>
               {{> molecules-thumbs }}
             </div>
           </div>
-                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-            <div class="flex items-start p-2 -ml-2">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
-              <div class="flex-1 overflow-hidden">
+      <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
           <div class="mb-1">
-                  <div class="flex justify-between">
-                    <div class="flex items-center">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
                   <span class="font-bold">{{ person.first }} {{ person.last }}</span>
-                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                     <span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
-                      {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+                    <a href="#" class="text-grey-200 text-xs ml-2 underline">(Upraveno přesdedajícím)</a>
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
+                </div>
               </div>
               {{> molecules-thumbs }}
             </div>
           </div>
-                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
-              <div class="flex-1 overflow-hidden">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
           <div class="mb-1">
-                  <div class="flex justify-between">
-                    <div class="flex items-center">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
                   <span class="font-bold">{{ person.first }} {{ person.last }}</span>
-                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                     <span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
-                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
                   {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                 </div>
+              </div>
               {{> molecules-thumbs }}
             </div>
           </div>
-                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
-            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
-              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
-              <div class="flex-1 overflow-hidden">
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
           <div class="mb-1">
-                  <div class="flex justify-between">
-                    <div class="flex items-center">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
                   <span class="font-bold">{{ person.first }} {{ person.last }}</span>
-                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
+                    <span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
+                  {{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
+                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
+                </div>
+              </div>
+              {{> molecules-thumbs }}
+            </div>
+          </div>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
+        </div>
+      </div>
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
+          <div class="mb-1">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
+                  <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+                  <div class="mt-1 lg:mt-0">
+                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
+                    <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
+                  {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Zamítnutý")}}
+                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
+                </div>
+              </div>
+              {{> molecules-thumbs }}
+            </div>
+          </div>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
+        </div>
+      </div>
+      <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
+        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
+        <div class="flex-1">
+          <div class="mb-1">
+            <div class="flex justify-between items-start xl:items-center">
+              <div class="flex flex-col xl:flex-row xl:items-center">
+                <div class="flex flex-col xl:flex-row xl:items-center">
+                  <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+                  <div class="mt-1 xl:mt-0">
+                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                     <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
-                      {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+                  </div>
+                </div>
+                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
+                  {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
+                  {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Odmítnutý předsedajícím")}}
                   {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                 </div>
+              </div>
               {{> molecules-thumbs }}
             </div>
           </div>
-                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
         </div>
       </div>
     </div>
 
     <div class="my-8 space-y-4">
-            {{> molecules-textarea-field(nolabel: true) }}
+      {{> molecules-textarea-field(nolabel: true, placeholder: "Vyplňte text vašeho příspěvku", rows: 5) }}
       <div class="space-x-4">
-              {{> atoms-icon-button(classes: "text-base btn--black btn--hoveractive", icon: "ico--chevron-down", cta: "Přidat příspěvek") }}
-              <span class="text-sm text-grey-200">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
+        {{> molecules-dropdown-button(cta: "Přidat příspěvek") }}
+        <span class="text-sm text-grey-200 hidden lg:inline">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
       </div>
     </div>
   </section>
-      </div>
-      <div>
-        <h2 class="head-alt-base mb-4 pt-1">Oznámení</h2>
-        {{> organisms-event-feed(classes: "w-full") }}
-      </div>
-    </div>
 
 </article>
-</div>