📱 add responsive design in register page

Author: marcode24

src/app/auth/login/login.component.scss

@@ -27,6 +27,7 @@
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
+  flex-wrap: wrap;
 
   & a {
     @include fs-6;

src/assets/scss/settings/_media.scss

@@ -0,0 +1,23 @@
+@mixin width-small {
+  @media only screen and (max-width: 480px) {
+    @content;
+  }
+}
+
+@mixin width-medium {
+  @media only screen and (max-width: 768px) {
+    @content;
+  }
+}
+
+@mixin width-large {
+  @media only screen and (max-width: 1024px) {
+    @content;
+  }
+}
+
+@mixin width-xlarge {
+  @media only screen and (max-width: 1200px) {
+    @content;
+  }
+}

src/styles.scss

@@ -1,5 +1,6 @@
 @import 'settings/_colors.scss';
 @import 'settings/_typography.scss';
+@import 'settings/_media.scss';
 @import 'elements/_buttons.scss';
 
 * {
@@ -75,6 +76,21 @@ body {
     padding: 1rem 1.8rem;
     max-width: 1400px;
     margin: 0 auto;
+
+    @include width-medium {
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    @include width-small {
+      padding: 1rem 0.8rem;
+    }
+
+    & .logo-content {
+      @include width-medium {
+        display: none;
+      }
+    }
   }
 
   & section {
@@ -169,12 +185,20 @@ form {
   }
 }
 
-
 .form-group {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   flex: 1;
+
+  @include width-medium {
+    flex: none;
+    width: 80%;
+  }
+
+  @include width-small {
+    width: 100%;
+  }
 }
 
 .main {