avatar upload works

src/components/user_card/user_card.scss

@@ -21,6 +21,22 @@
     padding-bottom: 0;
   }
 
+  &-bio {
+    text-align: center;
+    color: var(--lightText);
+    display: block;
+    line-height: 1.3;
+    padding: 0.6em;
+    margin: 0 0.6em;
+
+    img {
+      object-fit: contain;
+      vertical-align: middle;
+      max-width: 100%;
+      max-height: 400px;
+    }
+  }
+
   .user-card-bio {
     margin: 0.6em;
 
@@ -101,22 +117,6 @@
     z-index: -2;
   }
 
-  &-bio {
-    text-align: center;
-    color: var(--lightText);
-    display: block;
-    line-height: 1.3;
-    padding: 0.6em;
-    margin: 0 0.6em;
-
-    img {
-      object-fit: contain;
-      vertical-align: middle;
-      max-width: 100%;
-      max-height: 400px;
-    }
-  }
-
   &.-rounded-t {
     border-top-left-radius: var(--roundness);
     border-top-right-radius: var(--roundness);
@@ -535,3 +535,44 @@
     }
   }
 }
+
+.edit-image {
+  .panel-body {
+    text-align: center;
+  }
+
+  .current-avatar {
+    object-fit: contain;
+  }
+
+  .images-container {
+    display: grid;
+    margin: 1em;
+    grid-template-columns: 1fr 5em 1fr;
+    grid-template-rows: 20em;
+    gap: 0.5em;
+
+    .new-image {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .cropper {
+      flex: 1;
+    }
+
+    > * {
+      flex: 1 0 10em;
+      max-height: 100%;
+      aspect-ratio: 1;
+    }
+
+    .separator {
+      min-width: 1.1em;
+      font-size: 500%;
+      align-self: center;
+      flex: 0 1 5em;
+      aspect-ratio: unset;
+    }
+  }
+}