.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;
      
      flex: 1 1 auto;
      display: grid;
      grid-template-columns: repeat(20, 1fr);
      column-gap: .5rem;


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

         &:hover {
            transform: scale(1.5);
            opacity: 1;
         }
      }
      &:hover > *  {
         transform: translate3d(-5rem, 0, 0); 
      }
      &--movie:hover ~ &--movie {
          transform: translate3d(5rem, 0, 0); 
      }


      &--movie { 

         cursor: pointer;
         transition: all 450ms; 
         transform: center left; 
         padding-top: 3.5rem;
         padding-bottom: 4rem;
         height: 18rem;
        
         &:not(:last-child) {
            padding-right: .5rem;
         }
       
         &-image {
            height: 100%;
         }

      }
   }
}

