FEATURE Optimizing swiper css aspect and behaviour

resources/css/libs/swiper.css

@@ -6,20 +6,27 @@
   --swiper-theme-color: var(
     --wp--preset--color--primary
   ) !important;
-  --swiper-pagination-color: var(
-    --color-primary
-  ) !important;
+  --swiper-pagination-color: transparent !important;
+  --swiper-pagination-bullet-inactive-color: transparent !important;
 }
 
 .swiper-pagination {
-  @apply h-fit flex gap-12 !static mt-12;
+  @apply h-fit flex gap-12 !static;
   top: unset !important;
   bottom: 0px !important;
   z-index: 100 !important;
 }
 
 .swiper-pagination-bullet {
-  @apply bg-primary w-full;
+  @apply bg-transparent w-full !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;
+    height: 2px;
+  }
+}
+.swiper-pagination-fraction {
+  @apply !text-primary font-semibold;
 }
 
 .swiper-controls {
@@ -34,3 +41,6 @@
     }
   }
 }
+.swiper-wrapper {
+  @apply mb-4;
+}