lbry-desktop/src/renderer/scss/component/_main.scss

.main {
  margin: auto;
  overflow: hidden;
  position: relative;
  z-index: 1;

  &.main--contained {
    max-width: 1000px;
  }

  &:not(.main--no-padding) {
    padding: var(--spacing-vertical-large);
  }
}

.main--file-page {
  max-width: 1787px;
  display: grid;
  grid-template-areas:
    'content related'
    'info    related';
  grid-gap: var(--spacing-vertical-large);
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr auto;

  // TODO: Get responsive grid working, to many issues with different thumbnails messing stuff up on small screens with the file taking up the full width
  // I will conquer this one day
  // grid-template-areas:
  //   'content content'
  //   'info    related';
  //
  // @media (min-width: 1470px) {
  //
  // }

  .grid-area--content {
    grid-area: content;
    max-width: var(--file-max-width);
  }
  .grid-area--info {
    grid-area: info;
  }
  .grid-area--related {
    grid-area: related;
  }
}