created media queries

src/commons/about-section/about.jsx

@@ -40,7 +40,7 @@ function About() {
           <div className="composition">
             <img
               srcSet={`${nat1} 300w, ${nat1Large} 1000w`}
-              sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
+              sizes="(max-width: 56.25em) 20vw, (max-width: 600px) 30vw, 300px"
               alt="Photo 1"
               className="composition__photo composition__photo--p1"
               src={nat1Large}
@@ -48,7 +48,7 @@ function About() {
 
             <img
               srcSet={`${nat2} 300w, ${nat2Large} 1000w`}
-              sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
+              sizes="(max-width: 56.25em) 20vw, (max-width: 600px) 30vw, 300px"
               alt="Photo 2"
               className="composition__photo composition__photo--p2"
               src={nat2Large}
@@ -56,7 +56,7 @@ function About() {
 
             <img
               srcSet={`${nat3} 300w, ${nat3Large} 1000w`}
-              sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
+              sizes="(max-width: 56.25em) 20vw, (max-width: 600px) 30vw, 300px"
               alt="Photo 3"
               className="composition__photo composition__photo--p3"
               src={nat3Large}

src/sass/components/_popup.scss

@@ -10,6 +10,13 @@
   visibility: hidden;
   transition: all 0.3s;
 
+  @supports (-webkit-backdrop-filter: blur(10px)) or
+    (backdrop-filter: blur(10px)) {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background-color: rgba($color-black, 0.3);
+  }
+
   &__content {
     @include center-horizontal-vertical;
     width: 75%;

src/sass/components/_story.scss

@@ -17,6 +17,7 @@
 
   @include respond(phone) {
     transform: skewX(0);
+    padding-left: 4rem;
   }
 
   &__shape {
@@ -24,6 +25,7 @@
     height: 15rem;
     float: left;
     shape-outside: circle(50% at 50% 50%);
+    -webkit-clip-path: circle(50% at 50% 50%);
     clip-path: circle(50% at 50% 50%);
     transform: translateX(-3rem) skewX(12deg);
     position: relative;
@@ -32,9 +34,10 @@
       transform: translateX(-3rem) skewX(0);
       shape-outside: none;
       clip-path: circle(50%);
-      left: 22%;
       margin-bottom: 1rem;
       margin-top: -2rem;
+      left: 50%;
+      transform: translateX(-50%);
     }
   }
 

src/sass/layout/_header.scss

@@ -1,15 +1,30 @@
 .header {
+  height: 85vh;
+  background-image: linear-gradient(
+      to right bottom,
+      rgba($color-primary-light, 0.8),
+      rgba($color-primary-dark, 0.8)
+    ),
+    url(../../commons/images/hero-small.jpg);
+  background-size: cover;
+  background-position: top;
+  position: relative;
+
+  @supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
+    clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
     height: 95vh;
+  }
+
+  @media (min-resolution: 192dpi) and (min-width: 37.5em),
+    (-webkit-min-device-pixel-ratio: 2) and (min-width: 125em) {
     background-image: linear-gradient(
         to right bottom,
         rgba($color-primary-light, 0.8),
         rgba($color-primary-dark, 0.8)
       ),
       url(../../commons/images/hero.jpg);
-  background-size: cover;
+  }
-  background-position: top;
-  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
-  position: relative;
 
   @include respond(phone) {
     clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);

src/sass/pages/_home.scss

@@ -6,6 +6,9 @@
   @include respond(tab-port) {
     padding: 20rem 0;
   }
+  @include respond(phone) {
+    padding: 22rem 0;
+  }
 }
 
 .section-features {