start normal disign

src/pages/home/home.page.tsx

@@ -5,7 +5,7 @@ import Laptop from '@shared/assets/icons/laptop.svg';
 const HomePage = () => {
   return (
     <div className={classes.home}>
-      <Laptop width={250} height={250} />
+      <Laptop className={classes.laptop} />
       <div className={classes.container}>
         <Form />
       </div>

src/pages/home/styles.module.scss

@@ -1,13 +1,36 @@
 @use '../../shared/assets/styles/adaptive' as adaptive;
 
+$adaptive: (
+    desktop: (
+        flex-direction: row,
+        size: 250px,
+        container-width: 768px
+    ),
+    table: (
+        flex-direction: row,
+        size: 250px,
+        container-width: 425px
+    ),
+    mobile: (
+        flex-direction: column,
+        size: auto,
+        container-width: auto
+    ),
+);
+
 .home {
     display: flex;
-    flex-direction: column;
     justify-content: center;
     width: 100%;
+    @include adaptive.set-adaptive($adaptive, flex-direction, flex-direction);
+
+    .laptop {
+        @include adaptive.set-adaptive($adaptive, width, size);
+        @include adaptive.set-adaptive($adaptive, height, size);
+    }
 
     .container {
         padding: 15px;
-        @include adaptive.container;
+        @include adaptive.set-adaptive($adaptive, width, container-width);
     }
 }