.header {
   background-color: $color-background;
   grid-column: 1 / 13;
   display: flex; 
  
   
   &__container {
      padding-top: 20rem;
      padding-left: 4.5rem;
       color: #fff;

      &-heading {
         font-size: 6rem;
         padding-bottom: 1rem;
      }

      &-btnPlay, 
      &-btnMyList {
         cursor: pointer;
         font-size: 1.6rem;
         color: #fff;
         outline: none;
         border: none;
         font-weight: 700;
         border-radius: .2vw;
         padding-left: 3.5rem;
         padding-right: 3.5rem;
         margin-right: 1rem;
         padding-top: 1rem;
         background-color: rgba(51,51,51,.5); 
         padding-bottom: 1rem;

         &-add {
            width: 15px;
            height: 15px;
            fill: #fff;
            margin-right: 1rem;
         }

         &-play {
            width: 15px;
            height: 15px;
            fill: #fff;
            margin-right: 1rem;
         }
         
         &:hover {
            color: #000;
            background-color: #e6e6e6;
            transition: all .2s;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .3);

            & > * {
               fill: #000;
            }
         }
      }

      &-overview {
         width: 45rem;
         line-height: 1.3;
         padding-top: 2.5rem;
         font-size: 1.8rem;
      }
   }
}