styles fixes

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

@@ -47,10 +47,25 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
-@media (min-width: 768px) {
+@media (max-width: 768px) {
   .popularMenuItemImage:focus {
     outline-offset: 4px;
   }
+  .youMightAlsoLikeContainer {
+    height: 150px !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+  .youMightAlsoLikeContainer {
+    height: 200px !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .youMightAlsoLikeContainer {
+    height: 200px !important;
+  }
 }
 
 /* Hover effects for devices that support hover */
@@ -118,7 +133,7 @@
   color: white;
 }
 
-[data-theme="dark"] .arrowButton:hover stroke{
+[data-theme="dark"] .arrowButton:hover stroke {
   background: rgba(40, 40, 40, 1);
   border-color: rgba(255, 255, 255, 0.2);
 }

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

@@ -191,7 +191,6 @@ export default function YouMightAlsoLike() {
                   justifyContent: "space-between",
                   width: isMobile ? "95px" : isTablet ? "120px" : "140px",
                   position: "relative",
-                  height: 200,
                   overflow: "hidden",
                 }}
               >
@@ -258,7 +257,6 @@ export default function YouMightAlsoLike() {
                   style={{
                     flex: 1,
                     rowGap: 0,
-                    height: 40,
                   }}
                 >
                   <div style={{ height: 25 }}>