.movieShowcase {
   background-color: $color-background;
   grid-column: 2 / 13;
   color: #fff;

   &__heading {
      padding-top: 2rem;
   }

   &__container { 
      overflow-y: hidden;
      transition: transform 450ms;
      overflow-x: scroll;
      display: flex;
      width: 95vw;
      overflow: -moz-scrollbars-horizontal; 
 
      grid-template-columns: repeat(20, 1fr);
      column-gap: 0;

      @include responsive(phone) {
         width: 98vw;
      }


      &:hover &--movie {
         opacity: .3;

         &:hover {
            transform: scale(1.5);
            opacity: 1;
         }
      }

      &:hover > *  {
         transform: translate3d(-6rem, 0, 0); 

         @include responsive(tab_port) {
            transform: translate3d(-5rem, 0, 0);
         }

         @include responsive(phone) {
            transform: translate3d(-3rem, 0, 0);
         }
      }

      &--movie:hover ~ &--movie {
          transform: translate3d(6rem, 0, 0); 

         @include responsive(tab_port) {
            transform: translate3d(4.5rem, 0, 0);
         }

         @include responsive(phone) {
            transform: translate3d(2.8rem, 0, 0);
         }
      }


      &:hover > &--movie__netflix  {
         transform: translate3d(-1rem, 0, 0); 
      }

      &--movie__netflix:hover ~ &--movie__netflix {
          transform: translate3d(1rem, 0, 0); 
      }

      &:hover &--movie__netflix {
         opacity: .3;

         &:hover {
            transform: scale(1.1);
            opacity: 1;
         }
      }

      &--movie { 
         cursor: pointer;
         transition: all 450ms; 
         transform: center left; 
         padding-top: 3.5rem;
         padding-bottom: 4rem;
         height: 21.5rem;
         min-height: 0;

         @include responsive(tab_port) {
            height: 18.5rem;
         }

         @include responsive(phone) {
            height: 14rem;
         }
        
         &:not(:last-child) {
            padding-right: .5rem;
         }
       
         &-image {
            height: 100%;
            
         }

         &__netflix {
            min-height: 0;
            padding-top: 3rem;
            padding-bottom: 4rem;
            padding-right: 1rem;
            height: 52rem;
            cursor: pointer;
            transition: all 450ms;
            transform: center left;

            @include responsive(tab_port) {
               height: 42rem;
            }
            @include responsive(phone) {
               height: 34rem;
            }
         }

      }
   }
}