fix(SW-337): better desktop gallery layout

components/Lightbox/Lightbox.module.css

@@ -1,7 +1,3 @@
-.desktopGallery {
-  display: none;
-}
-
 .mobileGallery {
   height: 100%;
   position: relative;
@@ -61,10 +57,13 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: var(--Spacing-x1);
+  height: 1.71875rem;
 }
 
-.desktopGalleryCloseButton {
+.desktopGallery,
+.desktopGalleryCloseButton,
+.desktopThumbnailGrid,
+.navigationButton {
   display: none;
 }
 
@@ -76,8 +75,7 @@
 
 .mainImageWrapper {
   position: relative;
-  flex: 1;
-  margin-bottom: var(--Spacing-x2);
+  width: 100%;
 }
 
 .mainImageContainer {
@@ -164,15 +162,16 @@
   border-radius: var(--Corner-radius-Small);
 }
 
-.navigationButton {
-  display: none;
-}
-
 .portraitImage {
   max-width: 548px;
 }
 
 @media (min-width: 1367px) {
+  .mobileGallery,
+  .thumbnailGrid {
+    display: none;
+  }
+
   .content {
     border-radius: var(--Corner-radius-Large);
     position: fixed;
@@ -196,10 +195,10 @@
   }
 
   .desktopGallery {
-    display: flex;
+    display: grid;
+    grid-template-rows: 1.71875rem 1fr 7.8125rem;
     background-color: var(--Base-Background-Primary-Normal);
     height: 100%;
-    flex-direction: column;
     position: relative;
     overflow: hidden;
   }
@@ -211,15 +210,11 @@
     right: var(--Spacing-x-half);
   }
 
-  .mobileGallery {
-    display: none;
-  }
-
-  .thumbnailGrid {
+  .desktopThumbnailGrid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: var(--Spacing-x1);
-    max-height: 125px;
+    max-height: 7.8125rem;
     overflow: hidden;
   }