RESPONSIVE FIXES

resources/css/blocks/chapter-section.css

@@ -1,5 +1,5 @@
 .chapter-section {
-  @apply relative lg:flex items-center justify-between gap-8  2xl:gap-12 !my-16;
+  @apply relative flex flex-col lg:flex-row  items-center justify-between gap-8  2xl:gap-12 !my-16;
   @apply py-32 xl:py-32 2xl:py-48 px-4 md:px-20;
   @apply max-w-screen-2xl mx-auto;
   color: var(--content-box-text-color);

resources/css/blocks/dernieres-dynamiques.css

@@ -1,5 +1,5 @@
 .block-dernieres-dynamiques {
-  @apply bg-primary text-white  pt-20 px-4 md:px-16;
+  @apply bg-primary text-white pt-2  md:pt-20 px-4 md:px-16;
   /* overflow: visible !important; */
   overflow: hidden !important;
 
@@ -8,7 +8,7 @@
   }
 
   &__header {
-    @apply flex flex-wrap  items-end justify-between gap-8 gap-y-2 uppercase text-4xl mb-12;
+    @apply flex flex-wrap  items-end justify-between gap-8 gap-y-2 uppercase text-4xl mb-6 md:mb-12;
 
     .block-title {
       @apply flex grow items-end justify-between gap-8 uppercase text-2xl md:text-4xl lg:text-5xl;
@@ -59,12 +59,12 @@
   }
 
   &__issue-title {
-    @apply lg:text-5xl text-4xl uppercase pb-12;
+    @apply lg:text-5xl text-4xl uppercase pb-6 md:pb-12;
     line-height: 1.2;
     font-weight: 100 !important;
   }
   &__issue-content-wrapper {
-    @apply grid gap-12 lg:gap-36  pb-24 overflow-hidden lg:overflow-visible;
+    @apply grid gap-y-6 gap-12 lg:gap-36  pb-24 overflow-hidden lg:overflow-visible;
     @screen md {
       grid-template-columns: 61.8fr 38.2fr;
     }
@@ -113,7 +113,7 @@
 
   &__issue-description,
   &__issue-parution {
-    @apply mb-12;
+    @apply mb-0 md:mb-12;
 
     h4.title {
       @apply uppercase nunito text-lg font-bold pb-2 tracking-bigbig;

resources/css/blocks/revues-precedentes.css

@@ -1,11 +1,12 @@
 .block-revues-precedentes {
   @apply bg-carhop-blue-50 py-20;
   .block-revues-precedentes__header {
+    @apply px-4;
   }
   .swiper-actions-wrapper,
   .swiper-pagination-fraction,
   .swiper-pagination {
-    @apply px-20;
+    @apply px-4 md:px-20;
   }
   .swiper-wrapper {
     @apply mb-16;
@@ -31,7 +32,8 @@
     }
 
     .block-subtitle {
-      @apply text-5xl font-normal uppercase;
+      @apply text-4xl md:text-5xl  font-normal uppercase text-center;
+      line-height: 1.2;
     }
   }
 
@@ -40,7 +42,7 @@
   }
 
   .card-revue {
-    @apply flex flex-col lg:grid  lg:grid-cols-2 gap-y-2 md:gap-y-6 2xl:gap-y-16 pb-1 2xl:pb-12 gap-x-12 2xl:gap-x-24 lg:px-20 px-4;
+    @apply flex flex-col lg:grid  lg:grid-cols-2 gap-y-2 md:gap-y-6 2xl:gap-y-16 pb-0 gap-x-12 2xl:gap-x-24 lg:px-20 px-4;
     @screen lg {
       grid-template-columns: 65fr 35fr;
     }
@@ -66,8 +68,8 @@
     &__content {
       @apply mx-0;
       h4.title {
-        @apply uppercase text-3xl md:text-5xl lg:text-5xl font-normal pb-8;
+        @apply uppercase  text-3xl md:text-5xl lg:text-5xl font-normal pb-4 md:pb-8;
-        line-height: 1.02;
+        line-height: 1.2;
       }
       h5.edito-title {
         @apply text-2xl font-bold uppercase pb-8;
@@ -78,11 +80,18 @@
       @apply relative w-full;
 
       .card-background {
-        @apply absolute  border-primary border bg-white top-20 left-8;
+        @apply absolute  border-primary border bg-white top-8 md:top-20 left-4 md:left-8;
-        width: 104%;
+        height: 260px;
-        height: 300px;
+        width: 100%;
-        transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg)
+        transform: rotate(3deg) scale(0.98);
-          rotateX(1deg) scale(0.98) translateY(-40px);
+
+        @screen lg {
+          width: 104%;
+          height: 300px;
+          transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg)
+            rotateX(1deg) scale(0.98) translateY(-40px);
+        }
+
         z-index: 0;
 
         &::before {
@@ -96,17 +105,21 @@
       }
     }
 
-    &__issue-thumbnail,
+    /* &__issue-thumbnail,
     .card-background {
       height: 300px;
-    }
+    } */
 
     &__issue-thumbnail {
       @apply bg-white border-primary border relative;
       /* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
       position: relative;
       z-index: 10;
-      height: 300px;
+
+      height: 260px;
+      @screen lg {
+        height: 300px;
+      }
 
       img {
         width: calc(100% - 42px);
@@ -120,7 +133,7 @@
     }
 
     &__post-details {
-      @apply md:flex  gap-8 pt-12;
+      @apply md:flex  gap-8 md:pt-12;
       .label {
         @apply uppercase font-bold tracking-bigbig !mb-0 text-primary;
       }

resources/css/layout/footer.css

@@ -1,5 +1,5 @@
 footer {
-  @apply w-full mx-auto px-12 pb-32;
+  @apply w-full mx-auto px-4 md:px-12 pb-32;
 
   .section-title {
     @apply text-lg nunito uppercase font-bold tracking-widest mb-6;

resources/css/libs/swiper.css

@@ -9,14 +9,14 @@
 }
 
 .swiper-pagination {
-  @apply h-fit flex gap-4 lg:gap-8 2xl:gap-12 !static;
+  @apply h-fit flex gap-2 md:gap-4 lg:gap-8 2xl:gap-12 !static mb-4;
   top: unset !important;
   bottom: 0px !important;
   z-index: 100 !important;
 }
 
 .swiper-pagination-bullet {
-  @apply bg-transparent w-full !py-6 relative;
+  @apply bg-transparent w-full !py-2 md:!py-6 relative;
 
   &:after {
     @apply content-[''] bg-primary w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;