item rendering, custom numput components

style/_inventory.scss

@@ -13,7 +13,7 @@
 }
 
 section.inventory {
-    width: 45%;
+    width: 50%;
     display: flex;
     flex-direction: column;
 
@@ -29,7 +29,7 @@ section.inventory {
     h3 {
         text-transform: lowercase;
         font-size: 1.3em;
-        margin-bottom: 10px;
+        margin: 0 20px 10px;
         font-weight: 900;
         &::first-letter {
             text-decoration: underline crimson;
@@ -84,6 +84,59 @@ section.inventory {
         }
     }
 
+    &-personal {
+        .item-swap {
+            &::before {
+                content: "→";
+            }
+            grid-column: 7/8;
+        }
+    }
+    &-common {
+        .item-swap {
+            &::before {
+                content: "←";
+            }
+            grid-column: 1/2;
+        }
+    }
+
+    .items {
+        margin-top: 20px;
+        .item {
+            &:nth-child(2n) {
+                background: rgba(white, 0.05);
+            }
+            font-weight: 300;
+            display: grid;
+            grid-template-columns: 20px 3fr 1fr 1fr 20px 20px 20px;
+            height: 40px;
+            padding: 3px 8px;
+
+            > * {
+                grid-row: 1/2;
+                display: flex;
+                align-items: center;
+            }
+
+            &-name {
+                grid-column: 2/3;
+            }
+            &-quantity {
+                grid-column: 3/4;
+            }
+            &-weight {
+                grid-column: 4/5;
+            }
+            &-more {
+                grid-column: 5/6;
+            }
+            &-remove {
+                grid-column: 6/7;
+            }
+        }
+    }
+
     input {
         color: white;
         width: 100%;
@@ -104,4 +157,8 @@ section.inventory {
         }
     }
 
+    button {
+        color: white;
+    }
+
 }