[FIX]

how we work page => responsive

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-8xl text-white">
+      <h1 class="head-9xl text-white">
         {{ title }}
       </h1>
     </div>

main/styleguide/source/_patterns/templates/how-we-works.mustache

@@ -29,7 +29,7 @@
       </div>
       </div>
         <template v-if="isCurrentView('timeline')">
-          <div class="mt-20">
+          <div class="mt-10 md:mt-20">
           {{> organisms-main-articles-timeline }}
           </div>
         </template>

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

@@ -174,6 +174,9 @@
   @apply font-alt text-4xl font-medium tracking-tight uppercase xl:text-8xl;
 }
 
+.head-9xl {
+  @apply font-alt text-5xl font-medium tracking-tight uppercase xl:text-8xl;
+}
 
 p {
   @apply text-sm leading-6 lg:text-base;

main/styleguide/source/css/molecules/switch.pcss

@@ -3,7 +3,7 @@
 }
 
 .switch__item {
-  @apply bg-grey-150 cursor-pointer px-4 py-2 mr-2 mb-2 font-alt font-normal text-black text-center text-lg;
+  @apply bg-grey-150 cursor-pointer p-3 mr-2 w-auto font-alt font-normal text-black text-center text-xl;
 
   &:hover {
     @apply no-underline bg-grey-200;