NQ-45 Responsive styling login and character select

src/assets/scss/login.scss

@@ -8,6 +8,7 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+  object-fit: cover;
 }
 
 .content-wrapper {
@@ -89,4 +90,18 @@
 
 a {
   text-decoration: none;
+}
+
+// Mobile screens (< 450px)
+@media screen and (max-width: 450px) {
+  .content-wrapper {
+    .content-elements {
+      .login-form {
+        .form-field {
+          width: 100%;
+          min-width: unset;
+        }
+      }
+    }
+  }
 }

src/components/screens/Characters.vue

@@ -106,7 +106,7 @@ function create() {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 100px;
+    gap: 80px;
     padding: 0 80px;
     &::before {
       content: '';
@@ -115,10 +115,14 @@ function create() {
     .characters-wrapper {
       display: flex;
       justify-content: center;
-      gap: 80px;
+      flex-wrap: wrap;
+      gap: 60px;
       width: 100%;
+      max-height: 650px;
+      overflow: auto;
 
       .character {
+        margin: 10px;
         width: 170px;
         height: 275px;
         display: flex;