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; }