portico: Fix the position and size of overflow for small size devices.

Fixes: #8424

static/styles/portico/landing-page.scss

@@ -443,21 +443,11 @@ nav ul li.active::after {
     color: hsl(219, 76%, 93%);
 }
 
-.portico-landing.features-app section.keyboard-shortcuts::after {
-    content: " ";
-    display: block;
-
-    position: absolute;
-    top: -169px;
-    right: 0;
+.portico-landing.features-app section.keyboard-shortcuts img.overflow-wave {
     width: 685px;
-    height: 170px;
-
-    background-image: url(/static/images/landing-page/wave.png);
-    background-size: 100% auto;
-    background-repeat: no-repeat;
-
-    z-index: 1;
+    right: 0px;
+    top: -168px;
+    position: absolute;
 }
 
 .portico-landing.features-app section.keyboard-shortcuts h3 {
@@ -477,7 +467,7 @@ nav ul li.active::after {
     color: hsl(170, 52%, 70%);
 }
 
-.portico-landing.features-app section.keyboard-shortcuts img {
+.portico-landing.features-app section.keyboard-shortcuts img.image {
     width: 600px;
     margin-left: 100px;
 }
@@ -3558,6 +3548,10 @@ nav ul li.active::after {
     .portico-landing.hello .integrations .integration-icons .group {
         margin: 10px 16px 0 16px;
     }
+
+    .portico-landing.features-app section.keyboard-shortcuts img.overflow-wave {
+        top: -100px;
+    }
 }
 
 @media (max-width: 550px) {
@@ -3723,13 +3717,26 @@ nav ul li.active::after {
         width: 60px;
     }
 
-    .portico-landing.features-app section.keyboard-shortcuts::after {
-        left: 0;
-    }
-
     .portico-landing.integrations .integration-categories-dropdown {
         width: 323px;
     }
+
+    .portico-landing.features-app section.keyboard-shortcuts img.overflow-wave {
+        top: -92px;
+    }
+}
+
+@media (max-width: 360px) {
+    .portico-landing.features-app section.keyboard-shortcuts img.overflow-wave {
+        top: -88px;
+    }
+}
+
+/* For iPhone 5/SE device */
+@media (max-width: 320px) {
+    .portico-landing.features-app section.keyboard-shortcuts img.overflow-wave {
+        top: -78px;
+    }
 }
 
 @media (max-width: 313px) {

templates/zerver/features.html

@@ -89,6 +89,7 @@
     </section>
 
     <section class="keyboard-shortcuts">
+        <img class="overflow-wave" src="/static/images/landing-page/wave.png" alt="" />
         <div class="feature-block">
             <h3>Keyboard shortcuts.</h3>
             <p>Communicate as efficiently as you use your favorite