Updated

frontend/components/product/ProductDetails.vue

@@ -9,21 +9,21 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
 </script>
 
 <template>
-    <section class="w-full p-[5rem] flex flex-col gap-y-[1.5rem]">
+    <section class="w-full container py-20 flex flex-col gap-y-[1.5rem]">
         <div class="w-full flex">
-            <span class="text-black typo-h-3"> جزيات محصول </span>
+            <span class="text-black max-lg:hidden typo-h-4 mb-4"> جزيات محصول </span>
         </div>
-        <div class="w-full flex items-start justify-between gap-[3rem]">
-            <div class="w-8/12">
+        <div class="w-full flex items-start justify-between gap-[3rem] max-lg:flex-col-reverse">
+            <div class="flex-1 w-full">
                 <Accordion />
             </div>
-            <div class="w-4/12">
+            <div class="w-full lg:w-[450px] xl:w-[600px]">
                 <div
-                    class="w-full bg-slate-50 rounded-xl flex-col-center p-[5rem] gap-[1.5rem]"
+                    class="w-full bg-slate-50 rounded-xl flex-col-center px-5 py-16 sm:p-[5rem] gap-[1.5rem]"
                 >
-                    <span>داخل جعبه چیه؟</span>
+                    <span class="typo-h-6 mb-8">داخل جعبه چیه؟</span>
                     <div
-                        class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[3rem]"
+                        class="w-full grid grid-cols-2 gap-y-[1.5rem] sm:gap-x-[3rem]"
                     >
                         <div
                             v-for="inPackItem in selectedVariant.in_pack_items"