.bd-page-components {
  width: 100vw;

  .bd-page-components-container {
    margin: var(--spacing-xxl) auto;
    display: flex;
    flex-direction: column;
    width: 90%;

    @include media('large') {
      margin: calc(var(--spacing-xxl) * 1.25) auto;
      display: grid;
      grid-template-areas: 'sidebar main toc';
      grid-template-columns: minmax(max-content, auto) minmax(490px, 750px) 210px;
      column-gap: var(--spacing-m);
    }

    @include media('xlarge') {
      max-width: var(--max-content-width);
    }

    &__main {
      @include component-doc;
      grid-area: main;
      position: relative;
      z-index: 50;

      .bd-page-components-background {
        position: absolute;
        object-fit: contain;
        opacity: 0.1;
        top: 0;
        right: -25%;
        transform: rotate(160deg) rotateY(180deg) scale(1.6);
        z-index: -1;
        user-select: none;
        pointer-events: none;

        @include media('medium') {
          top: 1%;
          transform: rotate(160deg) rotateY(180deg) scale(4);
        }
      }
    }
  }
}
