Compose most of election main page

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

@@ -2,6 +2,11 @@
   <i class="{{ icon }} banner__icon"></i>
   <div class="banner__body">
     <h1 class="{{ headClasses }}{{^ headClasses }}head-alt-lg{{/ headClasses }} banner__cta">{{ cta }}</h1>
-    {{> atoms-button(classes: "btn--white btn--fullwidth sm:btn--autowidth mt-4") }}
+    {{# fullwidthButton }}
+      {{> atoms-button(classes: "btn--white btn--fullwidth mt-4") }}
+    {{/ fullwidthButton }}
+    {{^ fullwidthButton }}
+      {{> atoms-button(classes: "btn--white btn--fullwidth sm:btn--autowidth mt-4") }}
+    {{/ fullwidthButton }}
   </div>
 </aside>

source/_patterns/02-organisms/01-candidates/candidate-table-fadeout.mustache

+<div class="candidate-table candidate-table--fadeout">
+  {{> molecules-candidate-table-row }}
+  {{> molecules-candidate-table-row }}
+  {{> molecules-candidate-table-row }}
+  {{> molecules-candidate-table-row }}
+  {{> molecules-candidate-table-row }}
+  {{> molecules-candidate-table-row }}
+  {{> molecules-candidate-table-row }}
+  {{> molecules-candidate-table-row }}
+  {{> molecules-candidate-table-row }}
+  {{> molecules-candidate-table-row }}
+</div>

source/_patterns/02-organisms/01-candidates/candidate-table.mustache

-<div class="candidate-table grid-cols-5">
+<div class="candidate-table">
   {{> molecules-candidate-table-row }}
   {{> molecules-candidate-table-row }}
   {{> molecules-candidate-table-row }}

source/_patterns/03-templates/elections-main.mustache

+<article class="hero hero--image py-4 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+  <div class="container grid lg:grid-rows-3 lg:grid-cols-7 gap-1 items-center">
+    <div class="lg:row-span-2 lg:col-span-3 order-1">
+      {{> atoms-basic-flag(font: "bg-green-100 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-3") }}
+      <h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1>
+    </div>
+    <div class="lg:row-span-1 lg:col-span-3 order-3">
+      <div class="md-2 md:mt-4 space-y-2">
+        {{> 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>
+    </div>
+    <div class="lg:row-span-3 lg:col-span-4 order-2">
+      <img src="/images/hero-profile-img.png" />
+    </div>
+  </div>
+</article>
+
+<div class="container pb-8">
+  <h1 class="head-alt-md text-center pt-8 pb-4">Kandidátka do krajských voleb</h1>
+
+  <div class="candidate-card-list grid-cols-4">
+    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+    {{> molecules-candidate-card(classes: "candidate-card-list__item candidate-card-list__item--last") }}
+    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+    {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+    {{> molecules-banner(color: "bg-black", fullwidthButton: true)}}
+  </div>
+
+  <div class="candidate-table candidate-table--fadeout pt-4">
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+  </div>
+
+  <div class="text-center pt-4">
+    {{> atoms-icon-button(cta: "Zobrazit vše", classes: "text-xl btn--black btn--hoveractive", icon: "fas fa-chevron-right") }}
+  </div>
+</div>

source/css/atoms/flag.pcss

 .flag {
   /* right margin makes space for flag stripe */
-  @apply inline-block relative py-4 pl-4 pr-3 mr-5 bg-black text-white;
+  @apply inline-block relative py-3 pl-4 pr-3 mr-5 bg-black text-white;
 
   &:after {
     @apply absolute w-5 h-full;

source/css/molecules/candidate-table-row.pcss

@@ -12,6 +12,10 @@
   }
 }
 
+.candidate-table-row__bio {
+  @apply truncate;
+}
+
 .candidate-table-row__affiliation {
-  @apply flex items-center justify-start;
+  @apply flex items-center justify-start whitespace-no-wrap;
 }

source/css/organisms/candidate-table.pcss

 .candidate-table {
+  @apply relative;
+
   .candidate-table-row {
     @apply bg-white;
   }
@@ -6,4 +8,11 @@
   .candidate-table-row:nth-child(odd) {
     @apply bg-grey-50;
   }
+
+  &.candidate-table--fadeout:after {
+    content: "";
+    background-image: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 100%);
+
+    @apply absolute bottom-0 left-0 w-full h-full;
+  }
 }