🎨 styles: product info responsive

:%s

src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss

@@ -0,0 +1,9 @@
+@import '../../../../styles/utilities';
+
+.productInfoDetail {
+    @apply spacing-horizontal;
+    margin: 0 auto 4rem;
+    @screen md {
+        @apply flex;
+    }
+}

src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss

@@ -1,4 +1,11 @@
 .productImgs {
+    @apply w-full;
+    @screen sm-only {
+        margin-bottom: 2rem;
+    }
+    @screen lg {
+        max-width: 60rem;
+    }
     .img {
         @apply w-full h-full;
         object-fit: cover;

src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss

@@ -1,6 +1,13 @@
 @import "../../../../../../styles/utilities";
 
 .productInfo {
+    @screen md {
+        max-width: 39rem;
+        margin-left: 4.8rem;
+    }
+    @screen lg {
+        margin-left: 11.2rem;
+    }
     .info {
         margin-bottom: 3.2rem;
         .heading {
@@ -25,12 +32,46 @@
             margin-top: 0.8rem;
         }
     }
+    .actions {
+        @screen sm-only {
+            @apply fixed flex justify-between items-center bg-white w-full;
+            z-index: 10000;
+            bottom: 0;
+            left: 0;
+            padding: 2rem;
+        }
+    }
     .bottom {
+        @screen sm-only {
+            @apply flex justify-between items-center flex-row-reverse;
+            margin-left: 1rem;
+            flex: 1;
+            button {
+                &:first-child {
+                    min-width: 13rem;
+                }
+                &:nth-child(n + 1) {
+                    margin-left: 0.8rem;
+                }
+            }
+        }
+        .buttonWithIcon {
+            @apply flex items-center;
+            .label {
+                @apply hidden;
+                @screen md {
+                    @apply inline-block;
+                    margin-left: 0.8rem;
+                }
+            }
+        }
+        button {
+            @apply w-full;
+        }
+
         @screen md {
             margin-top: 2.4rem;
-            max-width: 39rem;
             button {
-                @apply w-full;
                 &:first-child {
                     margin-bottom: 0.8rem;
                 }

src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common'
+import { IconBuy } from 'src/components/icons'
 import { LANGUAGE } from 'src/utils/language.utils'
 import s from './ProductInfo.module.scss'
 
@@ -25,10 +26,17 @@ const ProductInfo = ({ }: Props) => {
                     In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley
                 </div>
             </div>
-            <QuanittyInput />
-            <div className={s.bottom}>
-                <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
-                <ButtonCommon size='large' type='light'>{LANGUAGE.BUTTON_LABEL.ADD_TO_CARD}</ButtonCommon>
+            <div className={s.actions}>
+                <QuanittyInput />
+                <div className={s.bottom}>
+                    <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
+
+                    <ButtonCommon size='large' type='light'>
+                        <span className={s.buttonWithIcon}>
+                            <IconBuy /><span className={s.label}>{LANGUAGE.BUTTON_LABEL.ADD_TO_CARD}</span>
+                        </span>
+                    </ButtonCommon>
+                </div>
             </div>
         </section >
     )