mobile media queries

src/static/sass/components/_movieShowcase.scss

@@ -18,6 +18,10 @@
       grid-template-columns: repeat(20, 1fr);
       column-gap: 0;
 
+      @include responsive(phone) {
+         width: 98vw;
+      }
+
 
       &:hover &--movie {
          opacity: .3;

src/static/sass/layout/_footer.scss

@@ -5,20 +5,24 @@
    grid-column: 1 / 13;
    text-align: center;
 
-      &__copyright {
+   @include responsive(phone) {
-         color: #fff;
+      padding-top: 10rem;
-         font-size: 1.8rem;
+   }
 
-         &--link {
+   &__copyright {
-            text-decoration: none; 
+      color: #fff;
-            color: $color-red-2;
+      font-size: 1.8rem;
-            transition: all .3s;
       
-         }
+      &--link {
+         text-decoration: none; 
+         color: $color-red-2;
+         transition: all .3s;
 
-         &--link:hover {
-            color: orange;
-         }
       }
 
+      &--link:hover {
+         color: orange;
+      }
+   }  
+ 
 }

src/static/sass/layout/_header.scss

@@ -4,11 +4,19 @@
    height: 65rem;
    display: inline-block;
 
+   @include responsive(phone) {
+      height: 50rem;
+   }
+   
   
    &__container {
       padding-top: 20rem;
       padding-left: 4.5rem;
-       color: #fff;
+      color: #fff;
+
+      @include responsive(phone) {
+         padding-left: 1rem;
+      }
 
       &-heading {
          font-size: 6rem;
@@ -62,6 +70,10 @@
          line-height: 1.3;
          padding-top: 2.5rem;
          font-size: 1.8rem;
+
+         @include responsive(phone) {
+              width: 36rem;
+         }
       }
    }
 

src/static/sass/layout/_navigation.scss

@@ -22,6 +22,10 @@
       justify-content: flex-start;
       align-items: center;
 
+            @include responsive(phone) {
+               margin-left: 1rem;
+            }
+
       a:first-child {
          padding-left: .2%;
          color: $color-red;
@@ -35,6 +39,10 @@
          width: 2.2rem;
          padding-right: 2.5rem;
 
+         @include responsive(phone) {
+            display: none;
+         }
+
       }
       
       &--userLogo {
@@ -50,6 +58,10 @@
              margin-right: 3rem;
          }
 
+         @include responsive(phone) {
+            display: none;
+         }
+        
          &:hover > .dropdownContent {
             
             transition: all .4s;
@@ -84,6 +96,10 @@
             display: inline-block;
          }
 
+         @include responsive(phone) {
+            display: none; 
+         }
+
       }
 
       &--logo { 
@@ -134,15 +150,17 @@
             border: 1px solid #fff;
             transition: width .5s;
             cursor: pointer;
-
             opacity: 0;
 
-
               &:focus {
                   padding-left: 4rem;
                   width: 22rem;
                   cursor: text;
                   opacity: 1;
+
+                  @include responsive(phone) {
+                     width: 16rem;
+                  }
               }
          }
       }