From a233a93d167c549b4735ec6586f4f0859e63c1e4 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Mon, 20 Jul 2026 16:24:24 -0300
Subject: [PATCH] feat(store-home-page): add margin styling for adjacent store
 sections

---
 .../store-home-page.component.scss            |  5 +++
 .../product-list/product-list.component.scss  | 32 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/app/features/store/pages/store-home-page/store-home-page.component.scss b/src/app/features/store/pages/store-home-page/store-home-page.component.scss
index fc76535..c9c8e88 100644
--- a/src/app/features/store/pages/store-home-page/store-home-page.component.scss
+++ b/src/app/features/store/pages/store-home-page/store-home-page.component.scss
@@ -2,6 +2,11 @@
   display: block;
 }
 
+app-hero-banner + app-store-section,
+app-store-section + app-store-section {
+  margin-top: clamp(3rem, 6vw, 5rem);
+}
+
 .store-home__alert-error {
   margin: 0;
   border-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.18);
diff --git a/src/app/shared/components/product-list/product-list.component.scss b/src/app/shared/components/product-list/product-list.component.scss
index 4752a6a..3788053 100644
--- a/src/app/shared/components/product-list/product-list.component.scss
+++ b/src/app/shared/components/product-list/product-list.component.scss
@@ -17,8 +17,17 @@
   }
 
   &--column {
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+    container-name: product-list;
+    container-type: inline-size;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     align-items: stretch;
+
+    .product-list__item {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
   }
 
   &__item {
@@ -26,6 +35,27 @@
   }
 }
 
+@container product-list (min-width: 544px) {
+  .product-list--column .product-list__item {
+    flex-basis: calc((100% - 1.5rem) / 2);
+    max-width: calc((100% - 1.5rem) / 2);
+  }
+}
+
+@container product-list (min-width: 828px) {
+  .product-list--column .product-list__item {
+    flex-basis: calc((100% - 3rem) / 3);
+    max-width: calc((100% - 3rem) / 3);
+  }
+}
+
+@container product-list (min-width: 1112px) {
+  .product-list--column .product-list__item {
+    flex-basis: calc((100% - 4.5rem) / 4);
+    max-width: calc((100% - 4.5rem) / 4);
+  }
+}
+
 .product-list__paginator {
   margin-top: 1.5rem;
 }