feat(SW-272) implemented mobile design

components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css

@@ -0,0 +1,108 @@
+.megaMenuContent {
+  display: grid;
+  /* align-content: start; */
+}
+
+.seeAllLink {
+  display: flex;
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+  align-items: center;
+  gap: var(--Spacing-x1);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+}
+
+.submenus {
+  list-style: none;
+  display: grid;
+  gap: var(--Spacing-x3);
+  padding: var(--Spacing-x2) var(--Spacing-x4);
+}
+
+.submenu {
+  list-style: none;
+}
+
+.submenuItem {
+  display: flex;
+}
+
+.submenusItem {
+  display: grid;
+  gap: var(--Spacing-x1);
+  align-content: start;
+}
+
+.link {
+  padding: var(--Spacing-x1) 0;
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  width: 100%;
+}
+
+.backWrapper {
+  padding: var(--Spacing-x2);
+}
+
+.backButton {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+  width: 100%;
+}
+
+@media screen and (max-width: 767px) {
+  .megaMenuContent {
+    gap: var(--Spacing-x2);
+  }
+  .submenusItem:first-child {
+    padding-bottom: var(--Spacing-x2);
+    border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  }
+
+  .cardWrapper {
+    background-color: var(--Base-Surface-Secondary-light-Normal);
+    padding: var(--Spacing-x4) var(--Spacing-x2);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .megaMenuContent {
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      "seeAllLink"
+      "submenus";
+    width: 600px;
+  }
+
+  .megaMenuContent:has(.cardWrapper) {
+    width: 900px;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-areas:
+      "seeAllLink seeAllLink card"
+      "submenus submenus card";
+  }
+
+  .seeAllLink {
+    grid-area: seeAllLink;
+  }
+
+  .submenus {
+    grid-area: submenus;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .submenusItem:first-child {
+    border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  }
+
+  .cardWrapper {
+    grid-area: card;
+  }
+
+  .cardWrapper .card {
+    border-radius: 0;
+  }
+}