cart: enhance "you may like" styles

src/pages/cart/cart.module.css

@@ -514,29 +514,11 @@
     outline-offset: 4px;
   }
 
-  .responsive-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    gap: 16px;
-    overflow-x: visible;
-  }
 }
 
-/* Extra large screens (min-width: 1024px) */
-@media (min-width: 1024px) {
-  .responsive-grid {
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 20px;
-  }
-}
 
-/* Large desktop screens (min-width: 1280px) */
+
-@media (min-width: 1280px) {
+
-  .responsive-grid {
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 24px;
-  }
-}
 
 /* Extra large desktop screens (min-width: 1440px) */
 @media (min-width: 1440px) {

src/pages/cart/components/CartDesktopLayout.tsx

@@ -31,9 +31,9 @@ export default function CartDesktopLayout() {
   return (
     <>
       <div className={`${styles.cartContainer} ${styles.desktopCartContainer}`}>
-        <Row gutter={[40, 40]} style={{ width: "100%" }}>
+        <Row gutter={40} style={{ width: "100%" }}>
           {/* Main Content Column */}
-          <Col xs={24} lg={16} xl={17}>
+          <Col xs={24} lg={14} xl={16}>
             <div className={styles.desktopMainContent}>
               {/* <div className={styles.desktopRecommendationsSection}>
                   <YouMightAlsoLike />
@@ -168,7 +168,7 @@ export default function CartDesktopLayout() {
           </Col>
 
           {/* Sidebar Column */}
-          <Col xs={24} lg={8} xl={7}>
+          <Col xs={24} lg={10} xl={8}>
             <div className={styles.desktopSidebar}>
               <YouMightAlsoLike />
 

src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css

@@ -2,9 +2,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    width: 100%;
+    overflow-y: scroll;
-    overflow: auto;
-    scrollbar-width: none;
 }
 
 :global(.darkApp) .youMightAlsoLikeContainer path {

src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx

@@ -40,7 +40,7 @@ export default function YouMightAlsoLike() {
 
   return (
     <>
-      <div style={{ marginBottom: 16 }}>
+      <div style={{ margin: 16 }}>
         <ProText
           strong
           style={{
@@ -51,7 +51,7 @@ export default function YouMightAlsoLike() {
         </ProText>
       </div>
 
-      <div className={`${styles.youMightAlsoLikeContainer} responsive-grid`}>
+      <div className={styles.youMightAlsoLikeContainer}>
         {menuItems.map((item: Product) => (
           <div key={item.id}>
             <div
@@ -62,7 +62,7 @@ export default function YouMightAlsoLike() {
                 justifyContent: "space-between",
                 width: isMobile ? "95px" : isTablet ? "120px" : "140px",
                 position: "relative",
-                height: 155,
+                height: 200,
                 overflow: "hidden",
               }}
             >