//
// Breakout Layout Object
//

.breakout {
  grid-column-start: 1;
  grid-column-end: -1;
}

.breakout__content {
  width: 95%;
  max-width: $grid-page-layout-main-column-width;
}

@media screen and (min-width: $grid-breakpoint-md) {
  .breakout__content {
    margin-right: auto;
    margin-left: auto;
    // Interpolate the variable, otherwise calc gets confused
    width: 80%;
  }
}

@media screen and (min-width: $grid-breakpoint-lg) {
  .breakout__content {
    // Interpolate the variable, otherwise calc gets confused
    width: 60%;
  }
}

@supports (display: grid) {
  @media screen and (min-width: $grid-breakpoint-xl) {
    .breakout__content {
      display: grid;
      width: 100%;
      grid-template-columns: 1fr $grid-page-layout-main-column-width 1fr;

      // All content elements are placed on the center column.
      > * {
        grid-column: 2; // center column
      }
    }
  }
}