=dual-column-template
  grid-template: "video video sidebar" 0fr "info info sidebar" auto "info info sidebar" 1fr / 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
.ageRestricted 
  max-width: calc(80vh * 1.78)
  display: inline-block
  +single-column-template
  @media only screen and (min-width: 901px)
    width: 300%

.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: 0 0 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.8)
        height: 60px
        border-radius: 5px
        position: absolute
        bottom: 12px
        left: 12px
        display: flex
        align-items: center
        padding: 0 12px

        .premiereIcon
          float: left
          font-size: 25px
          margin: 0 12px

        .premiereText
          min-width: 200px
          margin: 0 12px

          .premiereTextTimestamp
              font-size: 0.85em
              font-weight: bold

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

  .infoArea
    grid-area: info
    position: relative

  @media only screen and (min-width: 901px)
    .infoArea
      scroll-margin-top: 76px

    .infoAreaSticky
      position: sticky
      top: 76px

  .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 0 16px

    @media only screen and (min-width: 901px)
      margin: 0 8px 16px
