refactor(SW-337): fixes for lightbox

components/Lightbox/Lightbox.module.css

@@ -3,7 +3,6 @@
 }
 
 .mobileGallery {
-  margin-top: var(--current-mobile-site-header-height);
   height: 100%;
   position: relative;
   display: flex;
@@ -11,6 +10,11 @@
   gap: var(--Spacing-x2);
 }
 
+.mobileGalleryCloseButton {
+  justify-content: flex-start;
+  width: fit-content;
+}
+
 .mobileGalleryContent {
   display: block;
 }
@@ -18,7 +22,7 @@
 .fullViewCloseButton {
   position: absolute;
   top: var(--Spacing-x-one-and-half);
-  left: var(--Spacing-x-half);
+  right: var(--Spacing-x-half);
   z-index: 1;
 }
 
@@ -112,7 +116,6 @@
 }
 
 .fullViewContainer {
-  margin-top: var(--current-mobile-site-header-height);
   background-color: var(--UI-Text-High-contrast);
   height: 100%;
   padding: var(--Spacing-x2);
@@ -121,12 +124,12 @@
   display: grid;
   grid-template-rows: auto 1fr auto;
   place-content: center;
+  gap: var(--Spacing-x5);
 }
 
 .fullViewHeader {
   display: flex;
   justify-content: center;
-  margin-bottom: var(--Spacing-x5);
   width: 100%;
 }
 
@@ -173,9 +176,22 @@
 @media (min-width: 1367px) {
   .content {
     border-radius: var(--Corner-radius-Large);
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    overflow: hidden;
+  }
+
+  .galleryContent {
     width: 1090px;
     height: 725px;
-    overflow: hidden;
+  }
+
+  .fullViewContent {
+    width: 100vw;
+    height: 100vh;
+    max-width: 1512px;
+    max-height: 982px;
   }
 
   .galleryContainer {
@@ -216,6 +232,8 @@
 
   .fullViewCloseButton {
     position: fixed;
+    top: var(--Spacing-x-one-and-half);
+    right: var(--Spacing-x-half);
   }
 
   .fullWidthImage {
@@ -233,14 +251,16 @@
     grid-template-rows: auto 1fr auto;
     grid-template-columns: 1fr;
     justify-items: center;
+    width: 100%;
+    height: 100%;
   }
 
   .fullViewImageContainer {
     position: relative;
-    max-width: 1054px;
-    width: 80%;
-    height: 85%;
-    margin-bottom: var(--Spacing-x5);
+    width: 90%;
+    max-width: 1454px;
+    height: 100%;
+    max-height: 700px;
   }
 
   .navigationButton {