🎨 styles: account page layout

:%s

src/components/common/Layout/Layout.module.scss

@@ -2,7 +2,14 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
-    > main {
+    .wrapperWithBg {
+        @apply bg-background-gray;
+        width: 100%;
+        margin-top: -3.2rem;
+    }
+
+    > main,
+    .wrapperWithBg > main {
         flex: 1;
         width: 100%;
         max-width: min(100%, 1536px);

src/components/common/Layout/Layout.tsx

@@ -35,7 +35,9 @@ const Layout: FC<Props> = ({ children }) => {
                 <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
                 {
                     router.pathname === ROUTE.ACCOUNT ?
-                    <section>{children}</section> :
+                        <section className={s.wrapperWithBg}>
+                            <main>{children}</main>
+                        </section> :
                         <main>{children}</main>
                 }
                 <div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>

src/components/modules/account/AccountPage/AccountPage.module.scss

@@ -1,14 +1,14 @@
 @import '../../../../styles/utilities';
 
 .accountPage {
-    background-color: #F5F4F2;
+    @apply bg-background-gray;
-    margin-top: -3.2rem;
     padding: 3.2rem 2rem;
     min-height: 70rem;
 
     @screen md {
         padding-left: 2.8rem;
         padding-right: 2.8rem;
+        padding: 5.4rem 2rem;
     }
 
     @screen lg {