fix(SW-96): add css variable for use of mobile header height

app/globals.css

@@ -100,6 +100,7 @@
   --max-width: 113.5rem;
   --max-width-content: 74.75rem;
   --max-width-text-block: 49.5rem;
+  --mobile-site-header-height: 70.047px;
 }
 
 * {

components/Current/Header/MainMenu/mainMenu.module.css

@@ -8,7 +8,7 @@
   top: 0;
   width: 100%;
   z-index: 99999;
-  height: 70.047px;
+  height: var(--mobile-site-header-height);
 }
 
 .container {

components/Current/Header/header.module.css

@@ -4,6 +4,6 @@
 
 @media screen and (max-width: 1366px) {
   .header {
-    height: 70.047px;
+    height: var(--mobile-site-header-height);
   }
 }

components/Lightbox/Lightbox.module.css

@@ -3,7 +3,7 @@
 }
 
 .mobileGallery {
-  margin-top: 70.047px;
+  margin-top: var(--mobile-site-header-height);
   height: 100%;
   position: relative;
   display: flex;
@@ -112,7 +112,7 @@
 }
 
 .fullViewContainer {
-  margin-top: 70.047px;
+  margin-top: var(--mobile-site-header-height);
   background-color: var(--UI-Text-High-contrast);
   height: 100%;
   padding: var(--Spacing-x2);

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -1,10 +1,10 @@
 .sidePeek {
   position: fixed;
-  top: 70.047px;
+  top: var(--mobile-site-header-height);
   right: auto;
   bottom: 0;
   width: 100%;
-  height: calc(100vh - 70.047px);
+  height: calc(100vh - var(--mobile-site-header-height));
   background-color: var(--Base-Background-Primary-Normal);
   z-index: 100;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
@@ -24,7 +24,7 @@
 
 .overlay {
   position: absolute;
-  top: 70.047px;
+  top: var(--mobile-site-header-height);
   bottom: 0;
   left: 0;
   right: 0;
@@ -46,7 +46,7 @@
   }
 
   to {
-    top: 70.047px;
+    top: var(--mobile-site-header-height);
   }
 }