[FIX]

Program page

main/styleguide/source/_patterns/atoms/form-fields/form-input.mustache

-<input type="text" class="text-input bg-white form-field__control {{ classes }}" value="" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }} />
+<input type="text" class="text-input bg-white form-field__control {{ classes }}" value=""
+       placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }} />

main/styleguide/source/_patterns/molecules/simple_header.mustache

@@ -3,7 +3,7 @@
 >
   <div class="grid-container header-max-width">
     <div class="grid-content">
-      <h1 class="head-9xl text-white">
+      <h1 class="head-8xl text-white">
         {{ title }}
       </h1>
     </div>

main/templates/main/includes/layout/simple_page_header.html

-<header class="bg-black flex items-center simple-header-height header-clip mb-8 xl:mb-24 xl:pt-24 w-full">
+<header class="bg-black flex items-center simple-header-height header-clip mb-8 xl:mb-24 xl:pb-24 xl:pt-44 w-full">
   <div class="grid-container header-max-width">
     <div class="grid-content">
       <h1 class="head-8xl text-white">

main/templates/main/includes/newsletter_section.html

@@ -13,7 +13,7 @@
         <input type="text" class="text-input bg-white form-field__control mb-3 w-full" value=""
                placeholder="Tvůj email"/>
         <div class="checkbox form-field__control flex items-center mb-3">
-          <input type="checkbox" id="checkbox_1">
+          <input type="checkbox" id="checkbox_1" class="text-input bg-white form-field__control">
           <label class="text-xs font-alt font-light" for="checkbox_1">"Souhlasím se zpracováním osobních údajů"</label>
         </div>
         {% include 'main/includes/button_animated.html' with btn_text="Odebírat" %}

main/templates/main/main_program_page.html

@@ -4,22 +4,23 @@
 {% block content %}
   {% include 'main/includes/layout/simple_page_header.html' %}
 
-  <main role="main">
+  <main role="main" class="mb-4 xl:mb-20">
     <div class="grid-container">
       <div class="grid-content">
-        <p class="font-alt leading-6 mb-12 text-xl">
+        <p class="font-alt text-xl leading-7 mb-5">
           {{ page.perex }}
         </p>
       </div>
     </div>
-    <div class="container--medium">
+    <div class="">
       <div class="__js-root">
         <ui-view-provider
           :initial="{ {% for program_group in page.program %}'{{ program_group.value.slug }}-{{ forloop.counter }}':{% if forloop.counter0 %}false{% else %}true{% endif %},{% endfor %} }"
           :sync-location="true"
           v-slot="{ isCurrentView, toggleView }"
         >
-          <div class="mb-12">
+          <div class="mb-12 container--medium flex justify-start">
+            <ui-horizontal-scrollable>
             <div class="switch">
               {% for program_group in page.program %}
                 <a @click="toggleView('{{ program_group.value.slug }}-{{ forloop.counter }}')" class="switch__item"
@@ -28,16 +29,16 @@
                 </a>
               {% endfor %}
             </div>
+            </ui-horizontal-scrollable>
           </div>
 
-          <div class="mb-12">
             {% for program_group in page.program %}
               <template v-if="isCurrentView('{{ program_group.value.slug }}-{{ forloop.counter }}')">
                 {% for item in program_group.value.point_list %}
-                  <div class="flex mb-6">
+                   <div class="grid-container mb-12">
                     {% image item.icon fill-150x150 as icon %}
-                    <img src="{{ icon.url }}" alt="{{ item.title }}" class="mr-6 text-6xl">
-                    <div class="flex flex-col">
+                    <img src="{{ icon.url }}" alt="{{ item.title }}" class="grid-left-side mr-6 text-6xl xl:justify-self-end">
+                    <div class="grid-content flex flex-col">
                       <h3 class="font-alt mb-4 text-4xl">
                         {{ item.title }}
                       </h3>
@@ -49,7 +50,6 @@
                 {% endfor %}
               </template>
             {% endfor %}
-          </div>
         </ui-view-provider>
       </div>
     </div>