/*==========================================================================
 * Grid
 *
 * Till IE11 isn't supported we shouldn't be depend on this layout
 * ========================================================================== */


@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}; // 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;
    }
  }
}


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

.l-grid--constrain-6 {
  & > * {
    grid-column: 5 / span 6;
  }
}