cart: clean css 1

src/pages/cart/cart.module.css

@@ -5,6 +5,45 @@
   overflow: auto;
   scrollbar-width: none;
 }
+.cartLayout {
+  max-width: 100%;
+  padding: 16px 16px 12vh;
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .cartLayout {
+    padding: 24px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .cartLayout {
+    padding: 32px;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+}
+.cartItem {
+  padding: 16px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .cartItem {
+    padding: 20px;
+    border-radius: 16px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .cartItem {
+    padding: 24px;
+    border-radius: 20px;
+  }
+}
 
 .youMightAlsoLikeContainer {
   display: flex;

src/pages/cart/page.tsx

@@ -157,48 +157,6 @@ export default function CartPage() {
     setIsEstimateTimeOpen(false);
   };
 
-  const getCartLayoutStyle = () => {
-    if (isMobile) {
-      return {
-        padding: "16px",
-        maxWidth: "100%",
-        paddingBottom: "12vh",
-      };
-    } else if (isTablet) {
-      return {
-        padding: "24px",
-        maxWidth: "100%",
-        paddingBottom: "12vh",
-      };
-    } else {
-      return {
-        padding: "32px",
-        maxWidth: "1400px",
-        margin: "0 auto",
-        paddingBottom: "12vh",
-      };
-    }
-  };
-
-  const getCartItemStyle = () => {
-    if (isMobile) {
-      return {
-        padding: "16px",
-        borderRadius: "12px",
-      };
-    } else if (isTablet) {
-      return {
-        padding: "20px",
-        borderRadius: "16px",
-      };
-    } else {
-      return {
-        padding: "24px",
-        borderRadius: "20px",
-      };
-    }
-  };
-
   const getMenuItemImageStyle = () => {
     if (isMobile) {
       return {
@@ -608,8 +566,7 @@ export default function CartPage() {
     <>
       <ProHeader>{t("cart.title")}</ProHeader>
       <div
-        className={`${styles.cartContainer} ${getResponsiveClass()}`}
+        className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`}
-        style={getCartLayoutStyle()}
       >
         <Space
           direction="vertical"
@@ -620,14 +577,7 @@ export default function CartPage() {
             <div className={styles.cartItems}>
               <Card
                 hoverable
-                styles={{
+                className={styles.cartItem}
-                  body: {
-                    ...getCartItemStyle(),
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "space-between",
-                  },
-                }}
               >
                 <div
                   style={{