🎨 styles: account page layout

:%s

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

@@ -2,14 +2,21 @@
     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);
+        max-width: min(100%, 1536px);
         margin: auto;
     }
 }
-.filter{
+.filter {
     @screen xl {
         display: none;
     }

src/components/common/Layout/Layout.tsx

@@ -35,8 +35,10 @@ const Layout: FC<Props> = ({ children }) => {
                 <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
                 {
                     router.pathname === ROUTE.ACCOUNT ?
-                    <section>{children}</section> :
-                    <main>{children}</main> 
+                        <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>
                 <ScrollToTop visibilityHeight={1500} />

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

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