header layout

src/static/sass/base/_base.scss

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

src/static/sass/components/_modal.scss

@@ -6,7 +6,8 @@
    left: 0; 
    color: #fff;
    height: 50rem;
- 
+   box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
+
    &__title {
       font-size: 4rem;
    }

src/static/sass/components/_movieShowcase.scss

@@ -1,6 +1,7 @@
 .movieShowcase {
-   background-color: blue;
+   background-color: $color-background;
    grid-column: 2 / 13;
+   color: #fff;
 
    &__container {
         display: grid;
@@ -11,4 +12,9 @@
            padding: 3rem;
         }
    }
+}
+
+.shit {
+   width: 20rem;
+   height: 10rem;
 }

src/static/sass/layout/_header.scss

@@ -1,9 +1,47 @@
 .header {
    background-color: rebeccapurple;
    grid-column: 1 / 13;
+   display: flex; 
+  
    
+   &__container {
+      padding-top: 25rem;
+      padding-left: 4.5rem;
+       color: #fff;
 
-   &__background {
-     
-   }  
+      &-heading {
+         font-size: 6rem;
+         padding-bottom: 1rem;
+      }
+
+      &-btnPlay, 
+      &-btnMyList {
+         cursor: pointer;
+         font-size: 1.5rem;
+         color: #fff;
+         border-radius: 5px;
+         padding-left: 4rem;
+         margin-right: 1rem;
+         padding-right: 4rem;
+         border: 1px solid rgba(255, 255, 255, .4);
+         padding-top: 1rem;
+         background-color: rgba(51, 51, 51, .4);
+         padding-bottom: 1rem;
+
+      
+
+         &:hover {
+            color: $color-dark;
+            background-color: #fff;
+            transition: all .3s;
+         }
+      }
+
+      &-overview {
+         width: 45rem;
+         line-height: 1.3;
+         padding-top: 1.5rem;
+         font-size: 1.8rem;
+      }
+   }
 }