RESPONSIVE FIX

resources/css/app.css

@@ -67,6 +67,7 @@
 @import './layout/footer.css';
 @import './layout/section.css';
 @import './layout/gutenberg.css';
+@import './layout/patterns.css';
 
 /* ########### PAGES ############ */
 @import './pages/archive-dbmob.css';

resources/css/base/typography.css

@@ -14,7 +14,10 @@ body.front-end {
   }
 
   h1 {
-    @apply text-5xl;
+    @apply text-xl md:text-5xl;
+    @media screen and (max-width: 1024px) {
+      @apply !text-4xl;
+    }
   }
 
   h2 {

resources/css/blocks/chapter-section.css

@@ -23,9 +23,9 @@
     @apply subtitle-big;
   }
   &--right {
-    @apply flex-row-reverse;
+    @apply lg:flex-row-reverse;
     .chapter-section__inner {
-      @apply flex-row-reverse;
+      @apply lg:flex-row-reverse;
     }
   }
   &--has-background {

resources/css/blocks/content-box.css

@@ -3,7 +3,7 @@
 }
 
 .content-box {
-  @apply relative px-4 md:px-8;
+  @apply relative px-2 md:px-8;
 
   &--variant-framed {
     @apply border border-carhop-green-600;
@@ -64,7 +64,7 @@
 
   &.aligncontained {
     /* max-width: calc(960px - 4rem) !important; */
-    @apply !max-w-screen-lg ;
+    @apply !max-w-screen-lg;
   }
   &.alignwide {
     @media (max-width: 767px) {

resources/css/blocks/front-header.css

@@ -1,5 +1,5 @@
 .block-front-header {
-  @apply pt-16 pb-32 text-white;
+  @apply pt-16 pb-32 text-white px-2;
   background-image: url('../resources/img/shapes/background-shape-C_green.svg');
 
   @apply bg-no-repeat bg-center;

resources/css/blocks/heading.css

@@ -62,7 +62,7 @@
     }
 
     p {
-      @apply !text-4xl fjalla  !tracking-wider font-normal;
+      @apply !text-3xl md:!text-4xl fjalla  !tracking-wider font-normal;
     }
   }
 

resources/css/blocks/narrative-card.css

@@ -1,5 +1,5 @@
 .narrative-card {
-  @apply p-12 py-16 mx-auto max-w-screen-lg relative;
+  @apply px-6 md:px-12 py-16 mx-auto max-w-screen-lg relative;
   overflow: hidden;
 
   > * {

resources/css/blocks/press-ressources.css

@@ -211,6 +211,15 @@
     ul.presse-reviews__years-list {
       @apply sticky top-0;
 
+      @media (max-width: 1024px) {
+        /* @apply flex items-center gap-4 flex-wrap; */
+        @apply grid grid-cols-2 gap-3;
+
+        li.presse-reviews__year {
+          @apply !mt-0;
+        }
+      }
+
       li.presse-reviews__year {
         @apply !list-none border border-primary border-solid text-4xl fjalla;
         a {
@@ -224,17 +233,10 @@
           }
         }
       }
+
       li.presse-reviews__year + li.presse-reviews__year {
         @apply mt-4;
       }
-
-      @media (max-width: 1024px) {
-        @apply flex items-center gap-4;
-
-        li.presse-reviews__year {
-          @apply !mt-0;
-        }
-      }
     }
   }
 

resources/css/blocks/story-timeline.css

@@ -1,14 +1,14 @@
 .wp-block-carhop-blocks-story-timeline {
-  @apply flex gap-12 mx-auto max-w-screen-xl;
+  @apply flex flex-col md:flex-row  gap-12 mx-auto max-w-screen-xl;
   aside.story-timeline__years {
     @apply text-white;
     ul {
       @apply sticky top-0 left-0 !pt-6;
-      @apply list-none p-0 m-0 flex flex-col gap-4;
+      @apply list-none p-0 m-0 grid grid-cols-2 md:flex flex-col gap-4;
       li {
-        @apply list-none bg-white text-primary p-6 border border-primary text-3xl fjalla;
+        @apply list-none bg-white text-primary border border-primary text-3xl fjalla p-0;
         a {
-          @apply no-underline;
+          @apply no-underline p-6 block;
         }
       }
 

resources/css/blocks/wp-block-buttons.css

@@ -1,6 +1,7 @@
 .wp-block-buttons.is-style-big-buttons {
   @apply mx-auto flex flex-col justify-center mt-4 mb-12;
   @apply px-4;
+
   @screen lg {
     flex-direction: row;
     @apply px-0;
@@ -10,6 +11,7 @@
     flex-shrink: 1;
     flex-grow: 1;
     flex-basis: 100%;
+
     @screen lg {
       @apply w-fit;
       flex-grow: 0;
@@ -17,7 +19,8 @@
     }
     .wp-block-button__link {
       @apply fjalla uppercase text-left flex justify-between items-center bg-white text-primary;
-      @apply text-3xl;
+      @apply text-2xl md:text-3xl;
+      @apply px-4 md:px-10;
       &:after {
         @apply content-[''] block w-16 h-16 bg-no-repeat;
 

resources/css/layout/patterns.css

@@ -0,0 +1,3 @@
+:where(.wp-block-group.has-background) {
+  @apply !px-2 md:!px-8  !bg-red-500;
+}