From 8f803b487e986576f9eb70b869fda12d32e05dcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Tue, 7 Oct 2025 13:18:20 +0200
Subject: [PATCH] grid responsive

---
 components/ProductsRelated.vue | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/components/ProductsRelated.vue b/components/ProductsRelated.vue
index ab30418..6964843 100644
--- a/components/ProductsRelated.vue
+++ b/components/ProductsRelated.vue
@@ -49,21 +49,19 @@ export default {
 
 <style lang="scss" scoped>
 .cards-grid {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    align-content: flex-start;
-    gap: 32px var(--spacing-p-8, 32px);
-    align-self: stretch;
-    flex-wrap: wrap;
-    margin-top: 2rem;
-  }
-  .c-pagination {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    margin-top: 4rem;
-  }
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
+  align-items: center;
+  justify-items: center;
+  margin-top: 2rem;
+}
+.c-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 4rem;
+}
 </style>