responsive review

components/ProductCardDetails.vue

@@ -297,6 +297,7 @@ export default {
 
   @include mobile {
     margin-top: 7rem;
+    padding: 2rem;
   }
 }
 
@@ -308,17 +309,14 @@ export default {
   gap: 4rem;
   width: 100%;
 
-  @media screen and (max-width: 1024px) {
-    flex-direction: column;
-    gap: 2rem;
-    margin-top: 4rem;
-    padding: 3rem 2rem;
-  }
+  // @media screen and (max-width: 1024px) {
+  //   flex-direction: column;
+  //   gap: 2rem;
+  //   padding: 3rem 2rem;
+  // }
   @include mobile {
     flex-direction: column;
     gap: 1rem;
-    margin-top: 5rem;
-    padding: 2rem 1rem;
   }
 }
 
@@ -339,11 +337,11 @@ export default {
     border-radius: 16px;
   }
 
-  @include mobile {
-    width: 200px;
-    height: 200px;
-    margin: 0 auto;
-  }
+  // @include mobile {
+  //   width: 200px;
+  //   height: 200px;
+  //   margin: 0 auto;
+  // }
 }
 
 .image {
@@ -358,7 +356,8 @@ export default {
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  
+  max-width: 100%;
+  word-break: break-word;
   @include mobile {
     margin-top: 2rem;
   }
@@ -378,7 +377,6 @@ export default {
   .description {
     margin-top: 8px;
     font-size: $m;
-    width: 80%;
     @include tablet {
       width: 100%;
     }
@@ -482,6 +480,8 @@ export default {
 
 .coop_info {
   margin-top: 25px;
+  max-width: 100%;
+  word-break: break-word;
   h4 {
     font-size: $h4;
     font-weight: $medium;