RESPONSIVE FIX reducing gap on mobile

resources/css/blocks/dernieres-dynamiques.css

@@ -136,8 +136,10 @@
       /* opacity: 0.5; */
       top: 100px;
       height: calc(100% - 150px);
-      transform: translateY(100px) translateX(-50%) perspective(800px) skewX(1deg)
-        rotateZ(-2deg) rotateY(-4deg) scaleX(1.98);
+      @screen lg {
+        transform: translateY(100px) translateX(-50%) perspective(800px) skewX(1deg)
+          rotateZ(-2deg) rotateY(-4deg) scaleX(1.98);
+      }
     }
     &__title {
       @apply text-base font-extrabold uppercase pb-8 tracking-widest nunito;

resources/css/blocks/revues-precedentes.css

@@ -29,9 +29,10 @@
   }
 
   .card-revue {
-    @apply grid gap-y-12 2xl:gap-y-16 pb-12 gap-x-12 2xl:gap-x-24 px-12;
-    grid-template-columns: 61.8fr 38.2fr;
-
+    @apply flex flex-col lg:grid  lg:grid-cols-2 gap-y-12 2xl:gap-y-16 pb-12 gap-x-12 2xl:gap-x-24 px-12;
+    @screen lg {
+      grid-template-columns: 61.8fr 38.2fr;
+    }
     .content-meta {
       @apply col-span-2 w-full max-w-full mb-0;
     }
@@ -50,6 +51,7 @@
 
     &__issue-thumbnail-wrapper {
       @apply relative w-full;
+
       .card-background {
         @apply absolute  border-primary border bg-white top-20 left-8;
         height: 94%;

resources/css/libs/swiper.css

@@ -3,15 +3,13 @@
   --swiper-pagination-bullet-height: 2px;
   --swiper-pagination-bullet-width: 100%;
   --swiper-pagination-bullet-horizontal-gap: 0px;
-  --swiper-theme-color: var(
-    --wp--preset--color--primary
-  ) !important;
+  --swiper-theme-color: var(--wp--preset--color--primary) !important;
   --swiper-pagination-color: transparent !important;
   --swiper-pagination-bullet-inactive-color: transparent !important;
 }
 
 .swiper-pagination {
-  @apply h-fit flex gap-12 !static;
+  @apply h-fit flex gap-4 lg:gap-12 !static;
   top: unset !important;
   bottom: 0px !important;
   z-index: 100 !important;
@@ -42,5 +40,5 @@
   }
 }
 .swiper-wrapper {
-  @apply mb-4;
+  @apply mb-4 block lg:flex;
 }