src/components/DeckBuilder/CardPicker.vue

@@ -18,8 +18,7 @@ $padding: 10px;
   max-height: 100%;
   display: grid;
   gap: $padding;
-  padding: ($padding * 4) $padding;
+  padding: $padding;
-  row-gap: $padding * 4;
   place-items: stretch;
 }
 
@@ -27,9 +26,11 @@ $padding: 10px;
   display: flex;
   align-items: center;
   transition: 100ms all;
+  cursor: pointer;
   img {
     max-width: 100%;
     max-height: 100%;
+    transition: box-shadow 60ms;
   }
   &.available:hover img {
     box-shadow: 0 0 15px 5px rgba(200, 210, 255, 0.5);

src/views/DeckBuilder.vue

@@ -103,6 +103,7 @@
 .cards {
   display: grid;
   grid-template-columns: 5% 1fr 5%;
+  column-gap: 10px;
 }
 
 .decklist {

src/views/Draft.vue

@@ -1,9 +1,14 @@
 <template>
   <section class="draftview">
     <section class="playerlist">
-      <b>Players</b>
+      <header>
+        <h2>Players</h2>
+      </header>
     </section>
     <section class="pool">
+      <header>
+        <h2>Available picks</h2>
+      </header>
       <CardPicker
         @picked="cardPicked"
         :columns="columns"
@@ -13,7 +18,9 @@
       />
     </section>
     <section class="cardlist">
-      <b>Cards</b>
+      <header>
+        <h2>Cards</h2>
+      </header>
     </section>
   </section>
 </template>
@@ -31,11 +38,21 @@
     padding: 10px 20px;
     grid-row: 1;
   }
+
+  header > h2 {
+    font-family: $fantasy;
+    font-weight: 600;
+    text-align: center;
+    font-size: 2.5vh;
+    padding: 1vh;
+  }
 }
 
 .pool {
+  display: flex;
+  flex-direction: column;
   .picker {
-    height: 100%;
+    flex: 1;
   }
 }