/*==========================================================================
 * Grid
 * ========================================================================== */


@mixin l-grid(){
  display: grid;
  grid-template-columns: minmax($grid-gutter, 1fr) $grid-main minmax($grid-gutter, 1fr);

  & > * {
    grid-row: 1;
    grid-column: 2 / span #{$grid-column-count + 2}; // Autoprefixer IE proof
  }

  /**
   * Warning message for making sure that .l-grid has only 1 child element
   * This is because IE11 doesn't support grid auto placement
   * and these elements won't get put on its own row in IE11, this will break the layout
   */
  > * + * {
    @include border-radius;
    border: 2px solid rgba(palette(negative),0.5);
    position: relative;
    margin: 20px 0 0 0;
    padding: 20px 20px 40px;
    background: rgba(palette(negative), 0.05);
    overflow: hidden;

    &::after {
      content: "The '.l-grid' container can only contain 1 element because IE11 doesn't support auto placement";
      padding: 2px 7px;
      background: palette(negative);
      color: palette(neutral);
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}


/**
 * Constrain a grid row (only when viewport is wide enough)
 */
@mixin l-grid--constrain() {
  @include mq($constrainable-bp) {
    & > * {
      grid-column: 3 / 15;
    }
  }
}

.l-grid {
  @include l-grid;
}

.l-grid--constrain {
  @include l-grid--constrain;
}

.l-grid--large {
  grid-template-columns: 0 repeat(2, minmax(0, 60px)) repeat(10, minmax(0, 120px)) repeat(2, minmax(0, 60px)) 0;

  @include mq($header-large-bp){
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 60px)) repeat(10, minmax(0, 120px)) repeat(2, minmax(0, 60px)) minmax(4%, 1fr) ;
  }
}