=dual-column-template
  grid-template: "video video sidebar" 0fr "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr

=theatre-mode-template
  grid-template: "video video video" auto "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr

=single-column-template
  grid-template: "video" auto "info" auto "sidebar" auto / auto

.videoLayout
  display: grid
  align-items: start
  +dual-column-template

  @media only screen and (max-width: 1350px)
    +theatre-mode-template

  @media only screen and (min-width: 901px)
    &.useTheatreMode
      +theatre-mode-template

  @media only screen and (max-width: 900px)
    +single-column-template

  &.isLoading, &.noSidebar
    +single-column-template

  .videoArea
    grid-area: video

    .videoAreaMargin
      margin: 0px 8px 16px

    .videoPlayer
      grid-column: 1
      max-width: calc(80vh * 1.78)
      margin: 0 auto
      position: relative

      .upcomingThumbnail
        width: 100%

      .premiereDate
        color: #FFFFFF
        background-color: rgba(0, 0, 0, 0.7)
        width: 400px
        height: 60px
        border-radius: 5%
        position: absolute
        bottom: 5px

        .premiereIcon
          float: left
          font-size: 25px
          margin-top: 12px
          margin-left: 8px
          padding: 5px

        .premiereText
          margin-left: 50px
          margin-top: 10px

  .watchVideo
    margin: 0px 8px 16px
    grid-column: 1

  .infoArea
    grid-area: info

  .sidebarArea
    grid-area: sidebar

    @media only screen and (min-width: 901px)
      min-width: 380px

    @at-root .noSidebar#{&}
      grid-area: auto

  .watchVideoPlaylist, .watchVideoSidebar, .theatrePlaylist
    margin: 0 8px 16px

  .watchVideoSidebar, .watchVideoPlaylist
    height: 500px

  .watchVideoRecommendations, .theatreRecommendations
    margin: 0 8px 16px