improved hero for mobile devices

Author: Roxaski

index.html

@@ -68,6 +68,9 @@
             <div class="hero">
                 <img width="2560" height="1440" draggable="false" src="./assets/main/hero.webp" alt="wedding couple under sakura trees">
             </div>
+            <div class="mobile-hero">
+                <img width="500" height="1080" draggable="false" src="./assets/main/hero_mobile.webp" alt="wedding couple under sakura trees">
+            </div>
             <!-- content -->
             <div class="grid-container">
                 <!-- venues -->

style.css

@@ -190,16 +190,21 @@ nav {
     transform: translateY(0) rotate(-45deg);
 }
 /* hero */
-.hero {
+.hero,
+.mobile-hero {
     position: relative;
 }
-.hero img {
+.hero img,
+.mobile-hero img {
     width: 100%;
     height: auto;
     mask-image: linear-gradient(180deg, 
                 rgba(0, 0, 0, 1) 50%, 
                 transparent 90%);
 }
+.mobile-hero img {
+    display: none;
+}
 /* grid layout */
 .grid-container {
     display: grid;
@@ -548,6 +553,10 @@ footer .container .section.social i {
         padding: 0 .5rem;
     }
     .hero img {
+        display: none;
+    }
+    .mobile-hero img {
+        display: block;
         height: 50vh;
         object-fit: cover;
     }