@use '../mixins' as *;
@use './table-of-content';

.doc-content-wrapper {
  --vp-content-width: 800px;

  padding: 32px 24px 96px;

  .doc-content-container {
    .doc-content {
      width: 100%;
    }

    @include respond-to('xlg') {
      width: var(--vp-content-width);
    }

    @include respond-to('xxl') {
      width: var(--vp-content-width);
    }
  }

  @include respond-to('md') {
    padding: 48px 32px 96px;
  }
  @include respond-to('lg') {
    padding: 64px 64px 96px;
  }
  @include respond-to('xxl') {
    padding: 64px 0 96px 64px;
    display: flex;
  }
}