Merge pull request 'trackerTask' (#23) from trackerTask into main

Reviewed-on: #23

src/pages/RegistrationSetting/registrationSetting.scss

@@ -40,8 +40,7 @@
         }
 
         @media (max-width: 483px) {
-          max-width: 160px;
-          left: -175px;
+          display: none;
         }
       }
     }
@@ -62,6 +61,20 @@
       position: absolute;
       top: -100px;
       right: 58px;
+
+      @media (max-width: 1100px) {
+        max-width: 100px;
+        top: -50px;
+        right: 25px;
+      }
+
+      @media (max-width: 800px) {
+        display: none;
+      }
+    }
+
+    @media (max-width: 1100px) {
+      padding: 20px 25px;
     }
   }
 
@@ -73,12 +86,23 @@
     &__head {
       display: flex;
       margin-bottom: 33px;
+
+      @media (max-width: 650px) {
+        flex-direction: column;
+        row-gap: 10px;
+        align-items: center;
+        margin-bottom: 10px;
+      }
     }
 
     &__suptitle {
       color: #6f6f6f;
       font-size: 14px;
       margin-right: 70px;
+
+      @media (max-width: 650px) {
+        margin-right: 0;
+      }
     }
 
     &__steps {
@@ -102,12 +126,17 @@
       font-size: 20px;
       font-weight: 500;
       color: #000000;
+
+      @media (max-width: 650px) {
+        text-align: center;
+      }
     }
 
     &__answers {
       margin-top: 45px;
       display: flex;
-      column-gap: 20px;
+      flex-wrap: wrap;
+      gap: 20px;
 
       button {
         border-radius: 12px;
@@ -120,8 +149,16 @@
       .active {
         background: #1458dd;
         color: whitesmoke;
-        font-weight: 500;
-        border: none;
+        border: 1px solid #1458dd;
+      }
+
+      @media (max-width: 1100px) {
+        gap: 10px;
+        margin-top: 20px;
+      }
+
+      @media (max-width: 450px) {
+        justify-content: center;
       }
     }
   }
@@ -152,6 +189,7 @@
         row-gap: 19px;
         column-gap: 21px;
         margin-bottom: 30px;
+        justify-content: center;
       }
 
       &__item {