automated maps and overlays in js

css/main.scss

@@ -3,7 +3,7 @@ html,body{
   background-color: #1A1A1A;
 }
 
-$debug:true;
+$debug:false;
 $pw:227.41mm;
 $ph:207.26mm;
 $mt:1cm;
@@ -33,6 +33,7 @@ $mi:1cm;
     background-position: left;
   }
   .page{
+    position: relative;
     @if $debug {
       background-color: green;
     }
@@ -42,13 +43,38 @@ $mi:1cm;
     background-repeat: no-repeat;
     background-size: contain;
 
-    .inner{
-      // display:none;
+    .overlay{
+      position: relative;
       width:100%; height:100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      z-index: 1;
+
       @if $debug {
         border: 1px solid blue;
       }
+
+      // img{max-width: 100%;}
+    }
+
+    .maps{
+      position:absolute;
+      top:0; left:0;
+      width:100%; height:100%;
+      z-index: 2;
+      .map{
+        position: absolute;
+        background-color: rgba(50, 50, 50, 0.8);
+        cursor: pointer;
+      }
+    }
+
+    &.page-6 .overlay{
+      background-image: url("../../images/vectos/04_chance-RB.svg")
     }
   }
 
+
+
 }