feat ui foundation layer for page container sections and grid

src/app/features/website/catalog/components/category-grid/category-grid.component.html

@@ -1,4 +1,4 @@
-<div class="catalog-category-grid">
+<div class="catalog-category-grid grid grid-4">
   @for (category of categories; track trackByCategoryId($index, category)) {
     <button type="button" class="catalog-category-card" (click)="categorySelected.emit(category)">
       <span class="catalog-category-image">

src/app/features/website/catalog/components/category-grid/category-grid.component.scss

@@ -1,7 +1,4 @@
 .catalog-category-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 24px;
 }
 
 .catalog-category-card {
@@ -100,11 +97,6 @@
 }
 
 @media (max-width: 640px) {
-  .catalog-category-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 16px;
-  }
-
   .catalog-category-content {
     min-height: 84px;
     padding: 10px 12px;

src/app/features/website/catalog/components/product-grid/product-grid.component.html

@@ -1,4 +1,4 @@
-<div class="catalog-product-grid">
+<div class="catalog-product-grid grid grid-4">
   @for (product of products; track trackByItemId($index, product)) {
     <div class="catalog-product-shell">
       <app-product-card

src/app/features/website/catalog/components/product-grid/product-grid.component.scss

@@ -1,7 +1,4 @@
 .catalog-product-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 24px;
   align-items: stretch;
 }
 
@@ -16,10 +13,3 @@
   width: 100%;
   height: 100%;
 }
-
-@media (max-width: 640px) {
-  .catalog-product-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 16px;
-  }
-}

src/app/features/website/catalog/containers/catalog-container.component.html

@@ -1,4 +1,4 @@
-<main class="catalog-page">
+<main class="catalog-page page-container">
   <header class="catalog-header">
     <a [routerLink]="'/catalog' | langRoute" class="catalog-root-link">{{ 'catalog.title' | translate }}</a>