diff --git a/src/styles/hero.css b/src/styles/hero.css index b00f2d9..a68e9ec 100644 --- a/src/styles/hero.css +++ b/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%; - aspect-ratio: 673 / 1108; + z-index: 2; + 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; diff --git a/src/styles/why.css b/src/styles/why.css index 7ee80d5..6f334aa 100644 --- a/src/styles/why.css +++ b/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; - height: 480px; + width: 320px; + 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; } }