/**
 * Grid
 * Grid system, works together with Width utilities.
 */
.l-Container {
  max-width: var(--gridMaxWidth);
  margin-right: auto;
  margin-left: auto;
}

.l-Grid {
  display: flex;
  flex-flow: row wrap;
}

/**
 * Modifier: gutters
 */

.l-Grid--gutter {
  margin: 0 calc(var(--gridGutter) * -1);
}

.l-Grid--gutter > .l-Grid__item {
  padding: 0 var(--gridGutter);
}

/**
 * Modifier: allow cells to equal distribute width
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex
 *    http://git.io/vllC7
 *
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
 *    http://git.io/vllWx
 */

.l-Grid--fill > .l-Grid__item {
  flex: 1 1 0%; /* 1 */
}

/**
 * Modifier: allow children of cells to fill height
 */

.l-Grid--equalHeight > .l-Grid__item {
  display: flex;
}

/**
 * No explicit width by default. Rely on combining a cell with a dimension
 * utility or a component class that extends 'Grid'.
 *
 * 1. Set flex items to full width by default
 * 2. Fix issue where elements with overflow extend past the
 *    `.Grid > *` container - https://git.io/vw5oF
 */

.l-Grid__item {
  flex-basis: 100%; /* 1 */
  min-width: 0; /* 2 */
  min-height: 1px;
}