fix img occlusion

src/components/Overlay/Content.js

@@ -20,6 +20,7 @@ export default ({ media, viewIdx, translations, switchLanguage, langIdx }) => {
               src={path}
               loader={<div className='source-image-loader'><Spinner /></div>}
               unloader={<NoSource failedUrls={[ path ]} />}
+              onClick={() => window.open(path, '_blank')}
             />
           </div>
         )

src/scss/cover.scss

@@ -25,7 +25,7 @@
   display: flex;
   width: 100vw;
 
-  @media only screen and (max-width: 992px) {
+  @media only screen and (max-width: 1200px) {
     position: inherit;
   }
 
@@ -183,6 +183,9 @@
           min-height: 10px;
           background-color: black;
           letter-spacing: 1px;
+          @media only screen and (max-width: 1200px) {
+            min-height: 100px;
+          }
         }
         &.yellow {
           color: black !important;
@@ -193,6 +196,9 @@
           background-color: $darkwhite;
           color: white;
         }
+        @media only screen and (max-width: 1200px) {
+          min-height: 100px;
+        }
       }
     }
   }
@@ -209,7 +215,7 @@
     h5 { margin-top: -15px; }
 
     // mobile styles, remove overlay buttons
-    @media only screen and (max-width: 992px) {
+    @media only screen and (max-width: 1200px) {
       font-size: 22pt !important;
       max-width: 100vw;
       padding: 0 40px 80px 40px;

src/scss/overlay.scss

@@ -316,6 +316,7 @@ $overlay-bg: rgba(239,239,239,0.9);
   padding: 20px;
   min-width: calc(100% - 40px);
   z-index: $final-level;
+  max-height: calc(100% - 200px);
 }
 
 .media-player {
@@ -332,15 +333,19 @@ $overlay-bg: rgba(239,239,239,0.9);
 }
 
 .source-image, .source-video {
-  padding: 0px;
+  padding: 1px;
   font-family: 'Lato', Helvetica, sans-serif;
   // max-width: calc(#{$panel-width} - 100px);
-  max-height: $panel-height;
+  max-height: 100%;
   margin: auto;
   width: auto;
   height: auto;
   max-width: 100%;
   object-fit: contain;
+  &:hover {
+    cursor: pointer;
+    background-color: $yellow;
+  }
 }
 
 .source-image-loader {