folder refactor

src/static/sass/components/_backdrop.scss

@@ -6,5 +6,5 @@
    left: 0; 
    top: 0; 
    background-color: rgba($color-background, .7);
-   
+   transition: all .5s;
 }

src/static/sass/components/_modal.scss

@@ -2,12 +2,15 @@
    position: fixed;
    z-index: 500; 
    width: 100%;
-   top:  25%; 
+   top:  0; 
    left: 0; 
    color: #fff;
    height: 52rem;
+   opacity: 0;
+   // transform: scale(0);
    box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
-
+   // transition: all  2s 1s;
+     
    &__container {
       background: linear-gradient(90deg, #000 50%, transparent);
       width: 70%;
@@ -35,15 +38,6 @@
       font-size: 2rem;
    }
 
-   &__cancel {
-      cursor: pointer;
-      width: 1.8rem;
-      fill: #fff;
-      float: right;
-      padding-right: 2rem;
-      padding-top: 2rem;
-   }
-
    &__overview {
       color: $color-modal-grey-2;
       padding-top: 2rem;
@@ -86,11 +80,15 @@
 }
 
 .show {
+   transition: .5s .3s ease-out;
+   top: 25%;
+   left: 0;
+   visibility: visible;
    opacity: 1;
+ 
 }
 
 .hide {
-   transition: all 1s;
-   display: none;
+    visibility: hidden;
 }
 

src/static/sass/components/_movie.scss

@@ -8,12 +8,11 @@
       width: 17.5rem;
       cursor: pointer;
       transition: transform .3s;
-
-      &:hover {
-          z-index: -1;
-         transform: scale(1.25); 
-
-      }
+      -webkit-transition: transform .3s;
+      
+       &:hover {
+         transform: scale(1.25);
+       }
 
    }
 

src/static/sass/components/_movieShowcase.scss

@@ -11,9 +11,10 @@
       overflow-y: hidden;
       transition: transform 450ms;
       overflow-x: scroll;
-      
-      flex: 1 1 auto;
-      display: grid;
+      display: flex;
+      width: 95vw;
+      overflow: -moz-scrollbars-horizontal; 
+ 
       grid-template-columns: repeat(20, 1fr);
       column-gap: 0;
 
@@ -60,6 +61,7 @@
          padding-top: 3.5rem;
          padding-bottom: 4rem;
          height: 21.5rem;
+         min-height: 0;
         
          &:not(:last-child) {
             padding-right: .5rem;
@@ -71,6 +73,7 @@
          }
 
          &__netflix {
+            min-height: 0;
             padding-top: 3rem;
             padding-bottom: 4rem;
             padding-right: 1rem;

src/static/sass/layout/_header.scss

@@ -66,17 +66,8 @@
    }
 
    &--fadeBottom {
-      
-   //  height: 65vw;
-   // height: 34rem;
-   // padding-top: 45rem;
-      // width: 100%;
-      // height: 20vh;
       height: 27.4rem;
-      // padding-bottom: 100rem;
-   //  transform: translateY(-1rem);
-   
-    background-image: linear-gradient(180deg, transparent,rgba(37, 37, 37, 0.61), rgb(17, 17, 17));
+      background-image: linear-gradient(180deg, transparent,rgba(37, 37, 37, 0.61), rgb(17, 17, 17));
    }
 }