Bug somewhere

static/sass/components/_modals.scss

@@ -36,12 +36,11 @@ $button-color: #000;
 
 // Modal background
 .modal {
-  display: none;
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background: $modal-bg;
   backdrop-filter: blur($modal-blur);
   display: flex;
@@ -53,20 +52,25 @@ $button-color: #000;
 // Modal content
 .modal-content {
   background-color: $modal-content-bg;
-  padding: 20px;
+  padding: 5px;
   border-radius: 8px;
   box-shadow: $modal-content-shadow;
-  width: 90%;
-  max-width: 900px;
-  max-height: 90vh;
-  overflow: hidden;
   position: relative;
-
+  min-width: 70vw;
+  min-height: 70vh;
+  max-width: 95vw; // Maks bredde på 90% af viewportens bredde
+  max-height: 95vh; // Maks højde på 90% af viewportens højde
+  overflow: auto; // Tilføj scroll, hvis indholdet bliver for stort
+  justify-content: center; /* Centrer billedet i modal horisontalt */
+  align-items: center; /* Centrer billedet i modal vertikalt */
+  flex-direction: column; /* Knapper placeres nedenunder billedet */
   img {
-    width: 100%;
     height: auto;
+    max-width: 90vw; // Maks bredde på 90% af viewportens bredde
+    max-height: 90vh; // Maks højde på 90% af viewportens højde
     object-fit: contain;
-    border-radius: 5px;
+    border-radius: 15px;
+    margin: 0 auto;
   }
 
   // Modal knapper (bevarer globale værdier)
@@ -78,9 +82,7 @@ $button-color: #000;
 
     button {
       position: relative; /* Tillader z-index at tage effekt */
-      margin: -20px; /* Øger negativ margin for mere overlap */
-      padding: 12px 18px;
-      font-size: 16px;
+      margin: 20px;
       cursor: pointer;
       transition: transform 0.3s ease, z-index 0.3s ease;
 
@@ -89,16 +91,6 @@ $button-color: #000;
         z-index: 3; /* Hæver knappen øverst ved hover */
       }
     }
-
-    button:nth-child(odd) {
-      transform: rotate(10deg); /* Roterer med uret */
-      z-index: 1; /* Start-lag for ulige knapper */
-    }
-
-    button:nth-child(even) {
-      transform: rotate(-10deg); /* Roterer mod uret */
-      z-index: 2; /* Lidt højere lag for lige knapper */
-    }
   }
 
   .close-btn {
@@ -107,12 +99,12 @@ $button-color: #000;
     cursor: pointer;
   }
 }
-.next-btn {
-  cursor: pointer;
-  position: absolute;
-  right: 20px;
-  transition: background-color 0.3s ease;
-}
+  .next-btn {
+    cursor: pointer;
+    position: absolute;
+    right: 20px;
+    transition: background-color 0.3s ease;
+    }
 // Thumbnail styling (forsiden)
 .thumbnail {
   width: 150px;