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

   &__heading {
      padding-top: 2rem;
   }

   &__container::-webkit-scrollbar {
      display: none;
   }

   &__container {
      overflow-y: hidden;
      transition: transform 450ms;
      overflow: -moz-hidden-unscrollable;
      // 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(-5rem, 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;
         object-fit: contain;

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

         @include responsive(phone) {
            height: 14rem;
         }

         &:not(:last-child) {
            padding-right: .5rem;
         }

         &-image {
            height: 100%;
            // object-fit: contain;
         }

         &__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;
            }
         }
      }
   }
}

// Slick carousel override styles
.slick-track {
   transition: transform 450ms;

   &:hover>div.movieShowcase__container--movie-image {
      opacity: .3;

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

.slick-slider {
   margin-right: 4rem;
   // right: -5px !important;
}

.slick-prev {
   left: 0 !important;
   z-index: 10000;
}

.slick-next {
   right: 0 !important;
}