Use CSS grid for item page header

Just modernizing some stuff, hum dee dum

app/assets/stylesheets/items/_show.sass

@@ -4,25 +4,33 @@
 body.items-show
   #item-header
     border-bottom: 1px solid $module-border-color
-    display: block
     margin-bottom: 1em
     padding: 1em 0
 
-    div, img
+    display: grid
-      +inline-block
+    grid-template-areas: "img gap1" "img name" "img links" "img gap2"
+    align-items: center
+    justify-content: center
+    column-gap: 1em
+    row-gap: .5em
 
-    div
+    #item-thumbnail
+      grid-area: img
+      border: 1px solid $module-border-color
+      height: 80px
+      width: 80px
+
+    #item-name
+      grid-area: name
       text-align: left
+      line-height: 100%
       
-    a
+    #item-links
-      font-size: 75%
+      grid-area: links
-      margin-left: 1em
+      text-align: left
-      
+      a
-  #item-thumbnail
+        font-size: 75%
-    border: 1px solid $module-border-color
+        margin-left: 1em
-    height: 80px
-    margin-right: .5em
-    width: 80px
     
   #item-name
     margin-bottom: 0

app/views/items/show.html.haml

@@ -3,8 +3,8 @@
 
 %header#item-header
   = image_tag @item.thumbnail_url, :id => 'item-thumbnail'
-  %div
+  %h2#item-name= @item.name
-    %h2#item-name= @item.name
+  %nav#item-links
     = nc_icon_for(@item)
     - unless @item.rarity.blank?
       == #{t '.rarity'}: #{@item.rarity_index} (#{@item.rarity})