resizing

client/assets/styles/instance.css

@@ -5,7 +5,7 @@
 .instance {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: min-content min-content min-content min-content;
+    grid-template-rows: min-content min-content min-content 1fr;
 
     grid-template-areas:
         "top    top     info"
@@ -148,13 +148,14 @@
 
 .cryp-list {
     grid-area: cryps;
-    display: flex;
-    flex: 1 1 auto;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
 }
 
 .instance-cryp, .instance-cryp-active {
     display: grid;
-    grid-template-rows: min-content min-content min-content 250px min-content;
+    grid-template-rows: min-content min-content min-content 1fr min-content;
     grid-template-areas:
         "name   "
         "skills "
@@ -184,15 +185,11 @@
 
 .cryp-list .avatar {
     grid-area: avatar;
-    display: flex;
-    flex: 1 1 auto;
-}
-
-.cryp-list img {
-    justify-self: center;
-    grid-area: avatar;
-    min-width: 150px;
-    max-width: 250px;
+    object-fit: contain;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    pointer-events: none;
 }
 
 .cryp-list .name {