src/styles/hero.css

@@ -21,7 +21,7 @@
 .hero__inner {
   position: relative;
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   align-items: flex-start;
   width: 100%;
   max-width: 1280px;
@@ -32,13 +32,21 @@
 }
 
 .hero__phone-column {
-  display: none;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding-top: 24px;
+  pointer-events: none;
 }
 
 .hero__phone-frame {
   position: relative;
-  width: 100%;
+  z-index: 2;
-  aspect-ratio: 673 / 1108;
+  width: min(320px, 100%);
+  height: 527px;
 }
 
 .hero__phone-crop {
@@ -58,6 +66,8 @@
 }
 
 .hero__content {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -218,14 +228,20 @@
   }
 
   .hero__phone-column {
-    display: flex;
     align-items: center;
+    justify-content: flex-start;
     flex: 1;
     min-width: 0;
     height: 100%;
     padding-top: 60px;
   }
 
+  .hero__phone-frame {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 673 / 1108;
+  }
+
   .hero__content {
     width: 660px;
     padding: 80px 0;

src/styles/why.css

@@ -29,6 +29,7 @@
 
 .why__copy {
   display: flex;
+  order: 2;
   flex: 1;
   flex-direction: column;
   align-items: flex-start;
@@ -86,10 +87,12 @@
 
 .why__illustration {
   position: relative;
-  display: none;
+  display: block;
+  order: 1;
+  align-self: center;
   flex-shrink: 0;
-  width: 480px;
+  width: 320px;
-  height: 480px;
+  height: 320px;
 }
 
 .why__illustration-image {
@@ -201,12 +204,21 @@
     flex-direction: row;
   }
 
+  .why__copy {
+    order: 1;
+  }
+
+  .why__illustration {
+    order: 2;
+  }
+
   .why__title {
     font-size: 48px;
   }
 
   .why__illustration {
-    display: block;
+    width: 480px;
+    height: 480px;
   }
 }