update mobile

src/components/CoverflowCarousel.module.css

@@ -10,6 +10,27 @@
   user-select: none;
 }
 
+/* Left and right fade out masks */
+.leftMask,
+.rightMask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100px;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.leftMask {
+  left: 0;
+  background: linear-gradient(to right, #0b1220, transparent);
+}
+
+.rightMask {
+  right: 0;
+  background: linear-gradient(to left, #0b1220, transparent);
+}
+
 .container.dragging {
   cursor: grabbing;
 }
@@ -415,6 +436,11 @@
   .dotsContainer {
     bottom: -35px;
   }
+  
+  .leftMask,
+  .rightMask {
+    width: 80px;
+  }
 }
 
 @media (max-width: 992px) {
@@ -453,6 +479,11 @@
     width: 10px;
     height: 10px;
   }
+  
+  .leftMask,
+  .rightMask {
+    width: 70px;
+  }
 }
 
 @media (max-width: 768px) {
@@ -497,21 +528,26 @@
     width: 9px;
     height: 9px;
   }
+  
+  .leftMask,
+  .rightMask {
+    width: 60px;
+  }
 }
 
 @media (max-width: 576px) {
   .container {
-    height: 350px;
+    height: 320px;
     margin: 20px 0 40px 0;
   }
   
   .cardContainer {
-    width: 220px;
-    height: 270px;
+    width: 200px;
+    height: 250px;
   }
   
   .cardWrapper {
-    padding: 0 8px;
+    padding: 0 6px;
   }
   
   .navButton {
@@ -541,17 +577,39 @@
     width: 8px;
     height: 8px;
   }
+  
+  /* Adjust positions for smaller screens */
+  .cardContainer.positionNeg2 {
+    transform: translateX(-280px) rotateY(55deg) scale(0.6);
+  }
+  
+  .cardContainer.positionNeg1 {
+    transform: translateX(-140px) rotateY(35deg) scale(0.75);
+  }
+  
+  .cardContainer.position1 {
+    transform: translateX(140px) rotateY(-35deg) scale(0.75);
+  }
+  
+  .cardContainer.position2 {
+    transform: translateX(280px) rotateY(-55deg) scale(0.6);
+  }
+  
+  .leftMask,
+  .rightMask {
+    width: 50px;
+  }
 }
 
 @media (max-width: 400px) {
   .container {
-    height: 320px;
+    height: 280px;
     margin: 15px 0 35px 0;
   }
   
   .cardContainer {
-    width: 200px;
-    height: 250px;
+    width: 180px;
+    height: 230px;
   }
   
   .navButton {
@@ -572,4 +630,26 @@
     width: 7px;
     height: 7px;
   }
+  
+  /* Further adjust positions for very small screens */
+  .cardContainer.positionNeg2 {
+    transform: translateX(-240px) rotateY(55deg) scale(0.5);
+  }
+  
+  .cardContainer.positionNeg1 {
+    transform: translateX(-120px) rotateY(35deg) scale(0.7);
+  }
+  
+  .cardContainer.position1 {
+    transform: translateX(120px) rotateY(-35deg) scale(0.7);
+  }
+  
+  .cardContainer.position2 {
+    transform: translateX(240px) rotateY(-55deg) scale(0.5);
+  }
+  
+  .leftMask,
+  .rightMask {
+    width: 40px;
+  }
 }