MainContent.styles.scss

@import 'src/styles/variables';

.main-content {
  margin-left: $sidenav-width;
  margin-right: 20%;
  height: 100%;

  .space-header {
    height: 3rem;
  }

  &.scrolling {
    pre {
      overflow-x: hidden;
    }
  }

  .collapsible-content {
    > .header {
      background: hsl(240, 17%, 98%);
      border-radius: 4px;
      padding: 0.8rem 4rem 0.8rem 2rem;
    }
  }

  .resource-header,
  .reusable-header {
    margin: 0 3rem 3.2rem;
    font-size: 2.8rem;
    line-height: 3.6rem;
    font-weight: 600;
  }

  .resource-header {
    padding-bottom: 1.2rem;
    border-bottom: 1px solid $secondary-stroke;
  }

  .reusable-header {
    margin-top: 2.4rem;
  }
}

.collapsible-content {
  > .header {
    font-weight: 500;
    line-height: 1.8rem;
  }
}

.main-body {
  height: 100%;
  background: #f8f8fa;
  border-radius: 32px;
  padding: 3.6rem 3rem;
}

.main-resources {
  height: 100%;
}