half convert

client/cryps.css

@@ -521,6 +521,65 @@ table td svg {
     min-width: 300px;
 }
 
+/* CRYP BOX */
+.instance-cryp {
+    flex: 1 1 100%;
+
+    display: flex;
+    flex-flow: column;
+    border: 1px solid whitesmoke;
+    margin-bottom: 1em;
+    justify-content: center;
+
+    transition-property: all;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
+}
+
+.instance-cryp-top {
+    display: flex;
+    flex: 1 1 75%;
+    width: 100%;
+    justify-content: center;
+    align-items: stretch;
+}
+
+.instance-cryp figure {
+    margin: 0;
+    flex: 0 0 50%;
+    text-align: center;
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-end;
+}
+
+.instance-cryp .stats {
+    flex: 0 0 20%;
+    width: 100%;
+    display: flex;
+    border-top: 1px solid whitesmoke;
+}
+
+.stats figure {
+    flex: 1 1 0;
+    border: 0;
+    align-items: center;
+    padding: 0.5em 0 0 0;
+}
+
+.instance-cryp .stats figcaption {
+    font-size: 75%;
+}
+
+.instance-cryp .skills {
+    display: flex;
+    flex-flow: row wrap;
+    flex: 1 1 50%;
+    height: 100%;
+}
+
 /*
     INFO
 */

client/src/components/instance.cryps.jsx

@@ -124,12 +124,12 @@ function Cryp(props) {
     return (
         <div
             key={cryp.id}
-            className="game-cryp"
+            className="instance-cryp"
             onDragOver={onDragOver}
             onDrop={onDrop}
             style={border}
             >
-            <div className="game-cryp-top">
+            <div className="instance-cryp-top">
                 <figure className="img" onClick={onClick}>
                     {crypAvatar(cryp.name)}
                     <figcaption>{cryp.name}</figcaption>