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

$grid-gutter: percentage(1 / 14);
$grid-max-width: 40em;

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

  & > * {
    grid-row: 1;
    //grid-column: 2;
    grid-column: 2 / -2;
  }

  /**
   * 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 / -3;
    }

    &[data-constrain="max"] {
      & > * {
        grid-column: 4 / -4;
      }
    }

  }
}

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

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