//
// Page page layout build with CSS grid
//

// This layout is setup as two nested grids that consits of three columns each.
.page-layout--grid {
  // If the browser does not support grid, we use a simple layout:
  // One column centered in the middle of the page.
  margin: $grid-page-layout-margin auto;
  padding: $spacer-sm;
  max-width: $grid-page-layout-main-column-width;
}

main > .page-layout--grid {
  &:first-child {
    margin-top: $default-page-layout-to-top-margin;
  }
}

.center {
  grid-area: center;
}

.left {
  grid-area: left;
}

.right {
  grid-area: right;
}

@media screen and (min-width: $grid-breakpoint-md) {
  .page-layout--grid {
    padding: 0;
    width: $grid-page-layout-content-width-md;
  }
}

@media screen and (min-width: $grid-breakpoint-lg) {
  .page-layout--grid {
    width: $grid-page-layout-content-width-lg;
  }
}

@supports (display: grid) {
  @media screen and (min-width: $grid-breakpoint-xl) {
    .page-layout--grid {
      display: grid;
      margin-right: 0;
      margin-left: 0;
      padding: 0;
      width: 100%;
      max-width: none;
      grid-template-columns: 1fr $grid-page-layout-leftright-width $grid-page-layout-content-width-xl $grid-page-layout-leftright-width 1fr;
      grid-template-rows: auto;
      grid-template-areas: ". left center right .";
      grid-column-gap: $grid-page-layout-column-gap;

      > * {
        grid-row: auto;
      }
    }
  }
}