style(home): refine slider pagination layout and active color

- Center .slider-pagination with left 50% + translateX(-50%); drop full width
- Use var(--color-primary) for active dots (rectangle/circle) instead of fixed red
- Minor SCSS formatting

Made-with: Cursor

src/pages/home/wgts/slider/index.scss

@@ -7,10 +7,12 @@
   box-sizing: border-box;
   position: relative;
   width: 100%;
+
   .slider-img {
     width: 100%;
     height: 100%;
   }
+
   .slider-item {
     position: relative;
 
@@ -30,6 +32,7 @@
         height: 100%;
         display: block;
         background-color: transparent;
+
         video {
           background-color: transparent;
         }
@@ -71,14 +74,17 @@
       }
     }
   }
+
   .slider-pagination {
     position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
     bottom: 20px;
     z-index: 200;
-    width: 100%;
     box-sizing: border-box;
     padding: 20px;
     display: flex;
+
     &.cover {
       position: initial;
     }
@@ -86,9 +92,11 @@
     &.left {
       justify-content: flex-start;
     }
+
     &.center {
       justify-content: center;
     }
+
     &.right {
       justify-content: flex-end;
     }
@@ -97,15 +105,18 @@
       .dot-item {
         background: rgba(0, 0, 0, 0.4);
       }
+
       .pagination-count {
         background: rgba(0, 0, 0, 0.4);
         color: #fff;
       }
     }
+
     &.light {
       .dot-item {
         background: rgba(255, 255, 255, 0.7);
       }
+
       .pagination-count {
         background: rgba(255, 255, 255, 0.7);
         color: #555;
@@ -118,10 +129,12 @@
         height: 4px;
         margin: 0 4px;
         border-radius: 2px;
+
         &.active {
-          background: #d42f29;
+          background: var(--color-primary);
         }
       }
+
       .pagination-count {
         height: 40px;
         font-size: 24px;
@@ -137,10 +150,12 @@
         border-radius: 8px;
         background: rgba(0, 0, 0, 0.4);
         margin: 0 6px;
+
         &.active {
-          background: #d42f29;
+          background: var(--color-primary);
         }
       }
+
       .pagination-count {
         width: 50px;
         height: 50px;