some css bullshit

client/assets/styles/styles.css

@@ -172,7 +172,7 @@ svg {
     height: 2em;
 }
 
-img {
+.team .avatar {
     object-fit: contain;
     max-width: 100%;
     max-height: 100%;
@@ -348,31 +348,32 @@ header {
 
 .team {
     display: grid;
-    grid-gap: 1em;
-    grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(min-content, 33%));
     max-height: 100%;
 }
 
 .menu-construct {
-    border: 1px solid black;
+    margin: 0.5em;
+    flex: 1 1 auto;
 
     display: flex;
     flex-flow: column;
     text-align: center;
     justify-content: center;
 
+    border: 1px solid black;
     transition-property: border;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
 }
 
-.menu-construct:nth-child(3n) {
-    margin-right: 0;
-}
-
-.menu-construct:first-child, .menu-construct:nth-child(4n) {
-    margin-left: 0;
+.menu-construct .avatar {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    pointer-events: none;
+    height: 100%;
 }
 
 .spawn-btn.menu-construct {
@@ -400,33 +401,16 @@ header {
     opacity: 0
 }
 
-/* INSTANCE LIST */
-
 .menu-instances {
-    display: grid;
-
-    grid-template-areas:
-        "top"
-        "team"
-        "list";
-    grid-template-columns: 1fr;
-    grid-template-rows: min-content min-content 1fr;
-}
-
-.menu-instances .top {
-    grid-area: top;
+    display: flex;
+    flex-flow: column;
 }
 
 .menu-instances .construct-list {
-    grid-area: team;
-    grid-auto-columns: 1fr;
-    grid-gap: 0.5em;
-    justify-content: center;
+    flex: 1;
 }
 
 .menu-instance-list {
-    grid-area: list;
-
     flex: 1;
     order: 99;
     flex-flow: row wrap;
@@ -462,6 +446,10 @@ header {
     flex: 1 1 50%;
 }
 
+.create-form input {
+    width: 50%;
+}
+
 .create-form.disabled {
     border: 2px solid #222;
     color: #222;