FEATURE optmizing css behaviour and responsiveness

resources/css/blocks/dernieres-dynamiques.css

@@ -125,6 +125,9 @@
     @apply text-xl;
   }
 
+  .dernieres-dynamiques-swiper {
+    @apply overflow-visible;
+  }
   .related-articles {
     @apply relative  pb-8;
 

resources/css/blocks/revues-precedentes.css

@@ -7,7 +7,9 @@
   .swiper-pagination {
     @apply px-12;
   }
-
+  .swiper-wrapper {
+    @apply mb-0;
+  }
   &__inner {
     @apply max-w-screen-2xl mx-auto;
   }
@@ -25,11 +27,11 @@
   }
 
   &__slider-content {
-    @apply py-16 pt-8 md:pt-16 lg:pt-32;
+    @apply py-16 pt-8 md:pt-16 2xl:pt-32;
   }
 
   .card-revue {
-    @apply flex flex-col lg:grid  lg:grid-cols-2 gap-y-2 md:gap-y-12 2xl:gap-y-16 pb-12 gap-x-12 2xl:gap-x-24 lg:px-12 px-4;
+    @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-12 px-4;
     @screen lg {
       grid-template-columns: 61.8fr 38.2fr;
     }
@@ -41,8 +43,10 @@
     }
 
     &__content {
+      @apply mx-0;
       h4.title {
-        @apply uppercase text-3xl md:text-6xl lg:text-4xl font-normal pb-8;
+        @apply uppercase text-3xl md:text-6xl lg:text-6xl font-normal pb-8;
+        line-height: 1.02;
       }
       h5.edito-title {
         @apply text-2xl font-bold uppercase pb-8;
@@ -54,10 +58,10 @@
 
       .card-background {
         @apply absolute  border-primary border bg-white top-20 left-8;
-        height: 94%;
         width: 104%;
+        height: 300px;
         transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg)
-          rotateX(1deg) scale(0.98) translateY(-2px);
+          rotateX(1deg) scale(0.98) translateY(-40px);
         z-index: 0;
 
         &::before {
@@ -66,18 +70,22 @@
           height: calc(100% - 42px);
           left: 21px;
           top: 21px;
-
           z-index: 0;
         }
       }
     }
 
+    &__issue-thumbnail,
+    .card-background {
+      height: 300px;
+    }
+
     &__issue-thumbnail {
       @apply bg-white border-primary border relative;
       /* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
-      height: 330px;
       position: relative;
       z-index: 10;
+      height: 300px;
 
       img {
         width: calc(100% - 42px);

resources/css/libs/swiper.css

@@ -9,7 +9,7 @@
 }
 
 .swiper-pagination {
-  @apply h-fit flex gap-4 lg:gap-12 !static;
+  @apply h-fit flex gap-4 lg:gap-8 2xl:gap-12 !static;
   top: unset !important;
   bottom: 0px !important;
   z-index: 100 !important;
@@ -28,15 +28,18 @@
 }
 
 .swiper-controls {
-  @apply flex justify-start gap-6 pt-12 static;
+  @apply flex justify-start gap-6 pt-6 pb-10 static overflow-visible;
   .swiper-button-next,
   .swiper-button-prev {
-    @apply static block border border-primary p-12  rounded-full;
+    @apply static block border border-primary p-12  rounded-full transition-all duration-300;
     &:after {
       @apply left-1/2 top-1/2 block  w-fit;
 
       transform: translate(-50%, -50%);
     }
+    &:hover {
+      @apply scale-105;
+    }
   }
 }
 .swiper-wrapper {

resources/js/app.ts

@@ -2,6 +2,6 @@ import menuInit from './header';
 import initFooterShapes from './footer';
 
 window.addEventListener('load', function () {
-  menuInit();
-  initFooterShapes();
+  // menuInit();
+  // initFooterShapes();
 });