Use CSS grid for item page header

Just modernizing some stuff, hum dee dum

app/assets/stylesheets/items/_show.sass

@@ -4,26 +4,34 @@
 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%
       
+    #item-links
+      grid-area: links
+      text-align: left
       a
         font-size: 75%
         margin-left: 1em
     
-  #item-thumbnail
-    border: 1px solid $module-border-color
-    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
+  %nav#item-links
     = nc_icon_for(@item)
     - unless @item.rarity.blank?
       == #{t '.rarity'}: #{@item.rarity_index} (#{@item.rarity})