Updated css theme

sass/ma-collection-details.scss

@@ -57,21 +57,22 @@
             top: 12px;
         }
 
-        .navigation {
-            position: absolute;
-            top: 50%;
-            cursor: pointer;
-            z-index: 10;
+        .carousel {
+            display: grid;
+            grid-template-columns: auto 80vw auto;
+            z-index: 1;
+            text-align: center;
+        }
 
-            &.previous {
-                left: 12px;
-            }
-            &.next {
-                right: 12px;
-            }
+        .navigation {
+            cursor: pointer;
             i {
-                font-size: 2rem;
+                font-size: 1rem;
                 color: $nord4;
+
+                @include respond-to("small-up") {
+                    font-size: 2rem;
+                }
             }
         }
     }

sass/modal.scss

@@ -9,7 +9,7 @@
     justify-content: center;
     overflow: hidden;
     position: fixed;
-    z-index: 40;
+    z-index: 2;
 
     &.is-visible {
         display: flex;

sass/navbar.scss

@@ -4,7 +4,7 @@
     box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px;
     color: rgba(0,0,0,.7);
     position: fixed;
-    z-index: 30;
+    z-index: 1;
     top: 0;
     right: 0;
     left: 0;
@@ -131,7 +131,6 @@
                     min-width: 100%;
                     position: absolute;
                     top: 100%;
-                    z-index: 20;
                 }
 
                 &:hover {
@@ -282,7 +281,6 @@
             min-width: 100%;
             position: absolute;
             top: 100%;
-            z-index: 20;
 
             .navbar-item {
                 white-space: nowrap;

sass/toast.scss

@@ -3,7 +3,7 @@
     min-width: 250px;
     max-width: 360px;
     position: fixed;
-    z-index: 66;
+    z-index: 10;
     right: 30px;
     top: 30px;
     font-size: 17px;

views/pages/mon-compte/ma-collection/details.ejs

@@ -26,14 +26,17 @@
     <div class="modal" :class="{'is-visible': modalIsVisible}">
         <div class="modal-background"></div>
         <button type="button" aria-label="Fermer" class="close" @click="toggleModal"></button>
-        <button type="button" aria-label="Image précédente" class="navigation previous" @click="previous" v-if="index > 0">
-            <i class="icon-left-open"></i>
-        </button>
-        <button type="button" aria-label="Image suivante" class="navigation next" @click="next" v-if="index + 1 < item.images.length">
-            <i class="icon-right-open"></i>
-        </button>
-        <div class="modal-card for-image">
-            <img :src="preview" />
+        <div class="carousel">
+            <button type="button" aria-label="Image précédente" class="navigation previous" @click="previous">
+                <i class="icon-left-open"></i>
+            </button>
+            <div class="text-center">
+                <img :src="preview" />
+            </div>
+            <button type="button" aria-label="Image suivante" class="navigation next" @click="next">
+                <i class="icon-right-open"></i>
+            </button>
+
         </div>
     </div>