@import "@primer/css/layout/index.scss";
@import "@primer/css/support/variables/layout.scss";
@import "@primer/css/marketing/support/variables.scss";

.container {
  max-width: 720px;

  @include breakpoint(xl) {
    max-width: none;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(500px, 720px) minmax(220px, 1fr);
    grid-template-areas:
      "top right-sidebar"
      "bottom right-sidebar";
    column-gap: $spacer-6;
  }

  @include breakpoint(xl) {
    column-gap: $spacer-9;
  }
}

.sidebar {
  grid-area: right-sidebar;
}

.sidebarContent {
  @include breakpoint(xl) {
    position: sticky;
    top: $spacer-4;
    max-height: calc(100vh - #{$spacer-4});
    overflow-y: auto;
    padding-bottom: $spacer-4;
  }
}

.head {
  grid-area: top;
}

.content {
  grid-area: bottom;
}