grid responsive

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>