@import '../../../styles/mixins.scss';

.container {
  display: grid;
  width: 100%;
  justify-items: center;
  height: 75vh;
  aspect-ratio: 16 / 9;

  @media (max-width: 1200px) {
    height: 100%;
    max-height: 75vh;
  }

  @include screen(desktop) {
    // prevent sidebar from overlapping stream
    // padding-right: 320px;
  }

  //set height of player for tablet
  @include screen(tablet) {
    height: 400px;
    max-height: 400px;
  }

  //set height of player for mobile
  @include screen(mobile) {
    height: 250px;
    max-height: 250px;
  }

  .player,
  .poster {
    width: 100%;
    grid-column: 1;
    grid-row: 1;
  }
}

.embedded {
  height: 100vh;
  max-height: unset;
}