Turn puzzles into table

app/views/contests/show.html.slim

@@ -21,19 +21,27 @@
     .row
       .col
         h4 = t("puzzles.plural").capitalize
-    .row.row-cols-1.row-cols-md-3.g-4.mb-4
+    table.table.table-striped.table-hover
-      - @puzzles.each do |puzzle|
+      thead
-        .col
+        tr
-          css:
+          th scope="col"
-            .card:hover { background-color: lightblue; }
+            | Image
-          .card.h-100
+          th scope="col"
-            .card-header
+            | Title
+          th scope="col"
+            | Brand
+      tbody
+        - @puzzles.each do |puzzle|
+          tr.align-middle scope="row"
+            td
+              = image_tag(puzzle.image, class: "img-fluid", style: "max-width: 140px;") if puzzle.image.attached?
+            td
               = puzzle.name
-            = image_tag puzzle.image if puzzle.image.attached?
+            td
-            .card-body
+              = puzzle.brand
-              p.card-text
+            td
-                = puzzle.brand
+              a.btn.btn-sm.btn-secondary href=edit_contest_puzzle_path(@contest, puzzle)
-              a.stretched-link href=edit_contest_puzzle_path(@contest, puzzle)
+                | Edit
     .row
       .col
         a.btn.btn-primary href=new_contest_puzzle_path(@contest)