minor details

src/static/sass/abstracts/_variables.scss

@@ -1,13 +1,15 @@
 $color-dark: #171818;
-$color-background: #141414;
+$color-background: #111111;
 $color-background-modal: #000000;
 $color-white: rgb(221, 218, 218);
 
 $color-green: #1cb831; 
 $color-green-modal: rgb(92, 223, 92); 
 $color-modal-grey: rgb(172, 171, 171);
+$color-modal-grey-2: rgb(122, 122, 122);
 
 $color-red: #e21221;
+$color-red-2: #f80616de;
 
 $color-dark-blue: #082452;
 $color-light-blue: rgb(15, 61, 129);

src/static/sass/base/_base.scss

@@ -58,6 +58,6 @@ html {
 .container {
 	
 	display: grid;      
-	grid-template-rows: 50vw min-content min-content min-content; 
+	grid-template-rows: min-content min-content min-content min-content; 
 	grid-template-columns:  4% repeat(10, 1fr) 4%;
 }

src/static/sass/components/_modal.scss

@@ -5,9 +5,17 @@
    top:  25%; 
    left: 0; 
    color: #fff;
-   height: 50rem;
+   height: 52rem;
    box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
 
+   &__container {
+      background: linear-gradient(90deg, #000 50%, transparent);
+      width: 70%;
+      padding-top: 3rem;
+      height: 100%;
+      padding-left: 5rem;
+   }
+
    &__title {
       font-size: 4rem;
    }
@@ -37,11 +45,43 @@
    }
 
    &__overview {
-      color: $color-modal-grey;
+      color: $color-modal-grey-2;
       padding-top: 2rem;
       font-size: 2rem;
       hyphens: auto;
-      width: 60%;
+      width: 55%;
+      line-height: 1.2;
+   }
+
+   &__btn {
+      text-transform: uppercase;
+      font-weight: 500;
+      cursor: pointer;
+      background-color: transparent;
+      color: #fff;
+      border: .5px solid $color-modal-grey-2;
+      border-radius: 2px;
+      font-size: 1.5rem;
+      margin-top: 2rem;
+      margin-right: 1rem;
+      padding: 1rem 2rem 1rem 2rem;
+      transition: all .2s;
+
+      &:hover {
+         transform: scale(1.09); 
+      }
+
+      &--red {
+         background-color: $color-red-2;
+         border: none;
+      }
+
+      &--icon {
+         fill: #fff;
+         padding-right: 1rem;
+         height: 1.4rem;
+         width: 1.4rem;
+      }
    }
 }
 
@@ -54,10 +94,3 @@
    display: none;
 }
 
-.modal__container {
-   background: linear-gradient(90deg, #000 50%, transparent);
-   width: 70%;
-   padding-top: 3rem;
-   height: 100%;
-   padding-left: 3.5rem;
-}

src/static/sass/components/_movieShowcase.scss

@@ -37,7 +37,7 @@
 
 
       &:hover > &--movie__netflix  {
-         transform: translate3d(-2rem, 0, 0); 
+         transform: translate3d(-1rem, 0, 0); 
       }
 
       &--movie__netflix:hover ~ &--movie__netflix {
@@ -71,7 +71,6 @@
          }
 
          &__netflix {
-            // width: 2rem;
             padding-top: 3rem;
             padding-bottom: 4rem;
             padding-right: 1rem;

src/static/sass/layout/_footer.scss

@@ -4,11 +4,6 @@
    padding-bottom: 4rem;
    grid-column: 1 / 13;
    text-align: center;
-   
-
-   // // &__container {
-   //    // display: grid;
-   //    // grid-template-columns: repeat(4, 1fr);
 
       &__copyright {
          color: #fff;
@@ -16,8 +11,8 @@
         
          &--link {
             text-decoration: none; 
-            color: #fff;
-             transition: all .3s;
+            color: $color-red-2;
+            transition: all .3s;
 
          }
 

src/static/sass/layout/_header.scss

@@ -1,9 +1,10 @@
 .header {
    background-color: $color-background;
    grid-column: 1 / 13;
-   display: flex; 
-  
+   height: 65rem;
+   display: inline-block;
    
+  
    &__container {
       padding-top: 20rem;
       padding-left: 4.5rem;
@@ -63,5 +64,19 @@
          font-size: 1.8rem;
       }
    }
+
+   &--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));
+   }
 }