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

.root {
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  background-color: var(--theme-color-background-main);
  
  @include screen(desktop) {
    height: var(--content-height);
  }

  .mainSection {
    display: flex;
    overflow-y: scroll;
    flex-direction: column;
  }

  .topSection {
    padding: 0;
    background-color: var(--theme-color-components-video-background);
  }
  .lowerSection {
    padding: 0em 2%;
    margin-bottom: 2em;
  }

  .lowerSectionMobile {
    padding: 0.3em;
  }
}

.leftCol {
  display: flex;
  flex-direction: column;
}

.loadingSpinner {
  display: grid;
}

.main {
  display: grid;
  flex: 1;
  height: 100%;
  grid-template-rows: 1fr auto;
}