fixed products skeletons

frontend/pages/products/[...slug].vue

@@ -111,11 +111,11 @@ watch(
         </div>
         <ul
             v-if="productsIsLoading"
-            class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-8 gap-5 sm:gap-8 w-full"
+            class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-y-8 gap-5 sm:gap-8 w-full"
         >
             <div
                 class="w-full flex flex-col gap-3"
-                v-for="i in 8"
+                v-for="i in 10"
                 :key="i"
             >
                 <Skeleton
@@ -123,9 +123,10 @@ watch(
                     :key="i"
                     class="w-full"
                     :class="{
-                        '!h-[11.75rem] lg:!h-[22.5rem] !rounded-2xl': i == 1,
+                        '!h-[11.9rem] lg:!h-[17.25rem] !rounded-2xl': i == 1,
-                        '!h-[1.35rem] lg:!h-[1.5rem] !rounded-sm lg:!hidden': [2, 3].includes(i),
+                        '!h-[1.4rem] lg:!h-[1.5rem] !rounded-sm': [2, 3].includes(i),
-                        '!w-1/2': i == 2,
+                        '!w-1/2 lg:!w-full': i == 2,
+                        'lg:!w-1/2': i == 3,
                     }"
                 />
             </div>
@@ -150,7 +151,7 @@ watch(
             />
             <div
                 v-if="data && paginationData && data.count > 15"
-                class="w-full flex-center py-10"
+                class="w-full flex-center py-10 mt-5 lg:mt-10"
             >
                 <Pagination
                     :items="paginationData"