Merge pull request #100 from storytold/bflat-storyteller-hero-update

fix image positions broken on firefox and squished on mobile

packages/storyteller-home/src/App.scss

@@ -385,6 +385,7 @@ p {
   pointer-events: none;
   max-height: 680px;
   display: flex;
+  justify-content: center;
 
   &.roko {
     margin-left: -450px;
@@ -1023,21 +1024,23 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
 
 @media (max-width: 1199.98px) {
   .hero-img {
+    padding-top: 100px;
+
     &.roko {
       margin: 0;
       margin-bottom: 60px;
       margin-left: -310px;
-      height: 48%;
+      height: 100%;
     }
     &.basilisk {
       margin: 0;
       margin-bottom: 30px;
       margin-right: -300px;
-      height: 50%;
+      height: 100%;
     }
     &.pascal {
       // margin-bottom: 40px;
-      height: 50%;
+      height: 100%;
     }
   }
 
@@ -1105,22 +1108,21 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
 
 @media (max-width: 767.98px) {
   .hero-img {
+    padding-top: 60px;
+
     &.roko {
       margin: 0;
       margin-bottom: 60px;
-      margin-left: -290px;
-      height: 48%;
+      margin-left: -310px;
     }
     &.basilisk {
       margin: 0;
       margin-bottom: 30px;
-      margin-right: -270px;
-      height: 50%;
-    }
-    &.pascal {
-      // margin-bottom: 40px;
-      height: 50%;
+      margin-right: -300px;
     }
+    // &.pascal {
+    //   margin-bottom: 40px;
+    // }
   }
 
   .hero-title {
@@ -1131,10 +1133,6 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
     max-width: 90%;
   }
 
-  .bg-hero {
-    min-height: 920px;
-  }
-
   .shape-1-container {
     left: 12%;
     bottom: 14%;