.modal {
   position: fixed;
   z-index: 500; 
   width: 100%;
   top:  25%; 
   left: 0; 
   color: #fff;
   height: 50rem;
   box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);

   &__title {
      font-size: 4rem;
   }

   &__rating {
      font-size: 2rem;
      color: $color-green-modal;
   }

   &__info {
      padding-top: 1.6rem;
      font-size: 2rem;
   }

   &__episode {
      padding-top: .5rem;
      font-size: 2rem;
   }

   &__cancel {
      cursor: pointer;
      width: 1.8rem;
      fill: #fff;
      float: right;
      padding-right: 2rem;
      padding-top: 2rem;
   }

   &__overview {
      color: $color-modal-grey;
      padding-top: 2rem;
      font-size: 2rem;
      hyphens: auto;
      width: 60%;
   }
}

.show {
   opacity: 1;
}

.hide {
   transition: all 1s;
   display: none;
}

.modal__container {
   background: linear-gradient(90deg, #000 50%, transparent);
   width: 70%;
   padding-top: 3rem;
   height: 100%;
   padding-left: 3.5rem;
}