From 2226fb2abee18bd93bed6faefbc02e3e969a59e6 Mon Sep 17 00:00:00 2001
From: Veselov <nadar.veselov777@gmail.com>
Date: Sat, 6 Sep 2025 22:32:13 +0300
Subject: [PATCH] product-card

---
 composables/useProductsList.ts |  2 +-
 pages/index.vue                | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/composables/useProductsList.ts b/composables/useProductsList.ts
index 98f959c..04f9425 100644
--- a/composables/useProductsList.ts
+++ b/composables/useProductsList.ts
@@ -8,7 +8,7 @@ export const useProductsList = () => {
     name: product?.name,
     price: product?.price,
     variations: product?.variations,
-    images: product?.images?.splice(0, 5),
+    images: product?.images?.slice(0, 5),
   })) ?? [])
 
   return {
diff --git a/pages/index.vue b/pages/index.vue
index d16ff8c..09460d0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,17 +3,13 @@
     <div
       class="cards-list"
     >
-      <pre>
-      {{ productCardData }}
-      </pre>
-
       <div
         v-for="product in productCardData"
         :key="product.id"
         class="card"
         @click="router.push(`/product/${product.id}`)"
       >
-        <img :src="product?.images[0]?.src" alt="product?.image">
+        <img class="card__image" :src="product?.images[0]?.src" alt="card?.image">
 
         <div class="card__description">
           <div>{{ product?.name }}</div>
@@ -41,19 +37,23 @@ const router = useRouter()
 
 <style lang="scss">
 .cards-list {
-  padding: 40px;
+  padding: 15px;
 
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 4px;
 }
 
 .card {
-  width: 400px;
+  min-width: 300px;
   display: flex;
   flex-direction: column;
   cursor: pointer;
 
+  &__image {
+    width: 100%;
+  }
+
   &__description {
     padding-inline: 10px;
   }