Refactor auction views

src/views/auction/view.slim

@@ -1,14 +1,16 @@
+.content-container#auction-view-container
   #auction-view
     - if auction.images.length >= 1
       .slideshow-container
         - auction.images.each do |image|
           .slide-container
+            img src="#{image.url}" 
             .numbertext
-            a.prev onclick="nextSlide(-1)" = "<"
               | #{image.image_order+1}/#{auction.images.length}
-            a.next onclick="nextSlide(1)" = ">"
-          img src="#{image.url}" 
 
+        .next-container
+          a.prev onclick="nextSlide(-1)" = "<"
+          a.next onclick="nextSlide(1)" = ">"
 
       .slideshow-button-container
         - auction.images.each do |image|

src/views/stylesheets/style.sass

@@ -445,10 +445,13 @@ ul.list-container
   display: flex
   flex-direction: column
 
+#auction-view-container
+  margin-top: 1rem
+  justify-content: unset
 
 #auction-view
   display: grid
-  grid-template-columns: 1fr 2fr
+  grid-template-columns: 1fr 1fr
   grid-template-rows: 1fr 1fr
   grid-template-areas: "im in" "de in"
 
@@ -460,38 +463,40 @@ ul.list-container
 
 .slideshow-container
   grid-area: im
+  width: 40rem
   margin: auto
   .slide-container
     padding: 1rem
+    padding-top: 0
     .numbertext
       text-align: center
     img
       margin: 0 auto
+      width: 100% 
       height: 500px
-      width: auto
-      max-width: 500px
       object-fit: cover
-
+      border: 4px solid $shadow_clr
+  .next-container
+    display: flex
+    align-items: center
+    justify-content: center
     .prev, .next 
       cursor: pointer
-    position: absolute
-    top: 50%
+      position: relative
       width: auto
       padding: 1px 16px
-    margin-top: -22px
+      margin: 0 2rem
+      margin-top: -55px
       color: $fg_clr
       font-weight: bold
-    font-size: 18px
+      font-size: 1.2rem
       transition: 0.6s ease
-    border-radius: 0 3px 3px 0
       user-select: none
-
-  .next 
-    right: 0
-    border-radius: 3px 0 0 3px
+      border-radius: $border_radius
 
     .prev:hover, .next:hover 
-    background-color: #0022
+      color: $bg_clr
+      background-color: #0002
 
 // Animation keyframes
 @keyframes fade-in