main layout completed

src/static/sass/components/_movieOriginals.scss

@@ -1,5 +1,5 @@
 .movieOriginals {
-   background-color: pink;
+   background-color: $color-background;
    grid-column: 2 / 13;
 
    &__container {

src/static/sass/components/_movieShowcase.scss

@@ -8,14 +8,14 @@
    }
 
    &__container { 
-     overflow-y: hidden;
+      overflow-y: hidden;
       transition: transform 450ms;
       overflow-x: scroll;
       
       flex: 1 1 auto;
       display: grid;
       grid-template-columns: repeat(20, 1fr);
-      column-gap: .5rem;
+      column-gap: 0;
 
 
       &:hover &--movie {
@@ -27,21 +27,20 @@
          }
       }
       &:hover > *  {
-         transform: translate3d(-5rem, 0, 0); 
+         transform: translate3d(-6rem, 0, 0); 
       }
       &--movie:hover ~ &--movie {
-          transform: translate3d(5rem, 0, 0); 
+          transform: translate3d(6rem, 0, 0); 
       }
 
 
       &--movie { 
-
          cursor: pointer;
          transition: all 450ms; 
          transform: center left; 
          padding-top: 3.5rem;
          padding-bottom: 4rem;
-         height: 18rem;
+         height: 21.5rem;
         
          &:not(:last-child) {
             padding-right: .5rem;

src/static/sass/layout/_footer.scss

@@ -1,14 +1,18 @@
 .footer {
-   background-color: greenyellow;
-   grid-column: 2 / 13;
+   background-color: $color-background;
+   padding-top: 15rem;
+   padding-bottom: 4rem;
+   grid-column: 1 / 13;
+   text-align: center;
    
 
-   &__container {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
+   // // &__container {
+   //    // display: grid;
+   //    // grid-template-columns: repeat(4, 1fr);
 
-      &--description {
-         padding: 3rem;
+      &__copyright {
+         color: #fff;
+         font-size: 1.8rem;
       }
-   }
+   // // }
 }

src/static/sass/layout/_header.scss

@@ -1,5 +1,5 @@
 .header {
-   background-color: rebeccapurple;
+   background-color: $color-background;
    grid-column: 1 / 13;
    display: flex;