fixed header responsive styling

src/components/Header.js

@@ -7,7 +7,7 @@ import UnmuteIcon from '../static/images/unmute.svg'
 import ReactPlayer from 'react-player'
 
 const Header = ({ movie: { name, overview } }) => {
-  const [isMuted, setIsMuted] = useState(false)
+  const [isMuted, setIsMuted] = useState(true)
 
   return (
     <header className='header'>

src/static/sass/layout/_header.scss

@@ -7,7 +7,8 @@
   padding-top: 56.25%;
 
   @include responsive(phone) {
-    height: 58rem;
+    padding-top: 0;
+    height: 32rem;
   }
 
   &__video {
@@ -29,6 +30,11 @@
       color: #fff;
       top: 12rem;
       left: 3.5rem;
+
+      @include responsive(phone) {
+        top: 7rem;
+        font-size: 3rem;
+      }
     }
 
     &-btnPlay,
@@ -48,6 +54,10 @@
       background-color: rgba(112, 111, 111, 0.5);
       padding-bottom: 1rem;
 
+      @include responsive(phone) {
+        top: 24rem;
+      }
+
       &-add {
         width: 15px;
         height: 15px;
@@ -97,6 +107,14 @@
       border: #fff solid 1px;
       transition: all 0.3s;
 
+      @include responsive(tab_medium) {
+        top: 30rem;
+      }
+      @include responsive(phone) {
+        top: 20rem;
+        right: 8rem;
+      }
+
       & > * {
         stroke: #fff;
         stroke-width: 1;
@@ -117,10 +135,15 @@
       line-height: 1.3;
       padding-top: 2.5rem;
       font-size: 1.8rem;
+
+      @include responsive(phone) {
+        top: 10rem;
+        width: 20rem;
+      }
     }
 
     &--fadeBottom {
-      z-index: 100000000000;
+      // z-index: 100000000000;
       position: absolute;
       bottom: 0;
       height: 10rem;