@import "../../stylesheets/variables/_all";

.container {
  position: relative;
  display: flex;
  flex: 2;
  align-items: center;
  justify-content: center;
  overflow: auto;
  order: 1;
}

%ratio {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  //padding-bottom: calc(100% * 9 / 16);
}

%ratio-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.overlayWrapper {
  position: fixed;
  width: 100%;
  max-width: 170px;
  height: 96px;
  right: 8px;
  bottom: 8px;
  margin-top: 0 !important;

  @include mq($portrait) {
    position: absolute;
    width: 100%;
    max-width: none;
    height: 96px;
    top: 60px;
    left: 0;
    margin: 0 auto;
  }

  @include mq($large-up) {
    flex-basis: 15%;

  }
}

.moreThan4Videos{
  top: 63px;
  right: 0;
  position: fixed;
  height: calc(100% - 143px);
  text-align: right;
}

.overlayRatio {
  @extend %ratio;
}

.overlay {
  @extend %ratio-item;
}