:root {
  --gutter: 1rem;
  --gutter-compensation: -.5rem;
}

/* Custom media queries: Handheld is default — Mobile first. */
@custom-media --lap screen and (min-width: 40em);
@custom-media --desk screen and (min-width: 55em);
@custom-media --wide screen and (min-width: 75em);

[am-Grid-Row] {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 var(--gutter-compensation);
}

/* Reverse order */
[am-Grid-Row~="reverse"] {
  flex-direction: row-reverse;
  flex-wrap: row-reverse;
}

[am-Grid-Row~="gutters"] [am-Grid-Col] {
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);
}

/* Distribution */
[am-Grid-Row~="around"] { justify-content: space-around; }
[am-Grid-Row~="between"] { justify-content: space-between; }

/* Alignment per row */
/* Horizontal */
[am-Grid-Row~="start"] {
  justify-content: flex-start;
  text-align: start;
}

[am-Grid-Row~="end"] {
  justify-content: flex-end;
  text-align: end;
}

[am-Grid-Row~="center"] {
  justify-content: center;
  text-align: center;
}

/* Vertical */
[am-Grid-Row~="top"] { align-items: flex-start; }
[am-Grid-Row~="bottom"] { align-items: flex-end; }
[am-Grid-Row~="middle"] { align-items: center; }

/* Alignment per column */
[am-Grid-Col~="top"] { align-self: flex-start; }
[am-Grid-Col~="bottom"] { align-self: flex-end; }
[am-Grid-Col~="middle"] { align-self: center; }


/* Mobile first columns */
[am-Grid-Col] {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  flex-shrink: 0;
}

[am-Grid-Col~="12"] {
  flex: 0 0 100%;
  max-width: 100%;
}

[am-Grid-Col~="11"] {
  flex: 0 0 91.6666%;
  max-width: 91.6666%;
}

[am-Grid-Col~="10"] {
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
}

[am-Grid-Col~="9"] {
  flex: 0 0 75%;
  max-width: 75%;
}

[am-Grid-Col~="8"] {
  flex: 0 0 66.6666%;
  max-width: 66.6666%;
}

[am-Grid-Col~="7"] {
  flex: 0 0 58.3333%;
  max-width: 58.3333%;
}

[am-Grid-Col~="6"] {
  flex: 0 0 50%;
  max-width: 50%;
}

[am-Grid-Col~="5"] {
  flex: 0 0 41.6666%;
  max-width: 41.6666%;
}

[am-Grid-Col~="4"] {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

[am-Grid-Col~="3"] {
  flex: 0 0 25%;
  max-width: 25%;
}

[am-Grid-Col~="2"] {
  flex: 0 0 16.6666%;
  max-width: 16.6666%;
}

[am-Grid-Col~="1"] {
  flex: 0 0 8.3333%;
  max-width: 8.3333%;
}


/* Lap */
@media (--lap) {
  /* Distribution */
  [am-Grid-Row~="lap:around"] { justify-content: space-around; }
  [am-Grid-Row~="lap:between"] { justify-content: space-between; }

  /* Alignment per row */
  /* Horizontal */
  [am-Grid-Row~="lap:start"] {
    justify-content: flex-start;
    text-align: start;
  }

  [am-Grid-Row~="lap:end"] {
    justify-content: flex-end;
    text-align: end;
  }

  [am-Grid-Row~="lap:center"] {
    justify-content: center;
    text-align: center;
  }

  /* Vertical */
  [am-Grid-Row~="lap:top"] { align-items: flex-start; }
  [am-Grid-Row~="lap:bottom"] { align-items: flex-end; }
  [am-Grid-Row~="lap:middle"] { align-items: center; }

  /* Alignment per column */
  [am-Grid-Col~="lap:top"] { align-self: flex-start; }
  [am-Grid-Col~="lap:bottom"] { align-self: flex-end; }
  [am-Grid-Col~="lap:middle"] { align-self: center; }

  [am-Grid-Col~="lap:12"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  [am-Grid-Col~="lap:11"] {
    flex: 0 0 91.6666%;
    max-width: 91.6666%;
  }

  [am-Grid-Col~="lap:10"] {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }

  [am-Grid-Col~="lap:9"] {
    flex: 0 0 75%;
    max-width: 75%;
  }

  [am-Grid-Col~="lap:8"] {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
  }

  [am-Grid-Col~="lap:7"] {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }

  [am-Grid-Col~="lap:6"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  [am-Grid-Col~="lap:5"] {
    flex: 0 0 41.6666%;
    max-width: 41.6666%;
  }

  [am-Grid-Col~="lap:4"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  [am-Grid-Col~="lap:3"] {
    flex: 0 0 25%;
    max-width: 25%;
  }

  [am-Grid-Col~="lap:2"] {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
  }

  [am-Grid-Col~="lap:1"] {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
}



/* Desk */
@media (--desk) {
  /* Distribution */
  [am-Grid-Row~="desk:around"] { justify-content: space-around; }
  [am-Grid-Row~="desk:between"] { justify-content: space-between; }

  /* Alignment per row */
  /* Horizontal */
  [am-Grid-Row~="desk:start"] {
    justify-content: flex-start;
    text-align: start;
  }

  [am-Grid-Row~="desk:end"] {
    justify-content: flex-end;
    text-align: end;
  }

  [am-Grid-Row~="desk:center"] {
    justify-content: center;
    text-align: center;
  }

  /* Vertical */
  [am-Grid-Row~="desk:top"] { align-items: flex-start; }
  [am-Grid-Row~="desk:bottom"] { align-items: flex-end; }
  [am-Grid-Row~="desk:middle"] { align-items: center; }

  /* Alignment per column */
  [am-Grid-Col~="desk:top"] { align-self: flex-start; }
  [am-Grid-Col~="desk:bottom"] { align-self: flex-end; }
  [am-Grid-Col~="desk:middle"] { align-self: center; }

  [am-Grid-Col~="desk:12"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  [am-Grid-Col~="desk:11"] {
    flex: 0 0 91.6666%;
    max-width: 91.6666%;
  }

  [am-Grid-Col~="desk:10"] {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }

  [am-Grid-Col~="desk:9"] {
    flex: 0 0 75%;
    max-width: 75%;
  }

  [am-Grid-Col~="desk:8"] {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
  }

  [am-Grid-Col~="desk:7"] {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }

  [am-Grid-Col~="desk:6"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  [am-Grid-Col~="desk:5"] {
    flex: 0 0 41.6666%;
    max-width: 41.6666%;
  }

  [am-Grid-Col~="desk:4"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  [am-Grid-Col~="desk:3"] {
    flex: 0 0 25%;
    max-width: 25%;
  }

  [am-Grid-Col~="desk:2"] {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
  }

  [am-Grid-Col~="desk:1"] {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
}


/* Wide */
@media (--wide) {
  /* Distribution */
  [am-Grid-Row~="wide:around"] { justify-content: space-around; }
  [am-Grid-Row~="wide:between"] { justify-content: space-between; }

  /* Alignment per row */
  /* Horizontal */
  [am-Grid-Row~="wide:start"] {
    justify-content: flex-start;
    text-align: start;
  }

  [am-Grid-Row~="wide:end"] {
    justify-content: flex-end;
    text-align: end;
  }

  [am-Grid-Row~="wide:center"] {
    justify-content: center;
    text-align: center;
  }

  /* Vertical */
  [am-Grid-Row~="wide:top"] { align-items: flex-start; }
  [am-Grid-Row~="wide:bottom"] { align-items: flex-end; }
  [am-Grid-Row~="wide:middle"] { align-items: center; }

  /* Alignment per column */
  [am-Grid-Col~="wide:top"] { align-self: flex-start; }
  [am-Grid-Col~="wide:bottom"] { align-self: flex-end; }
  [am-Grid-Col~="wide:middle"] { align-self: center; }

  [am-Grid-Col~="wide:12"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  [am-Grid-Col~="wide:11"] {
    flex: 0 0 91.6666%;
    max-width: 91.6666%;
  }

  [am-Grid-Col~="wide:10"] {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }

  [am-Grid-Col~="wide:9"] {
    flex: 0 0 75%;
    max-width: 75%;
  }

  [am-Grid-Col~="wide:8"] {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
  }

  [am-Grid-Col~="wide:7"] {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }

  [am-Grid-Col~="wide:6"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  [am-Grid-Col~="wide:5"] {
    flex: 0 0 41.6666%;
    max-width: 41.6666%;
  }

  [am-Grid-Col~="wide:4"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  [am-Grid-Col~="wide:3"] {
    flex: 0 0 25%;
    max-width: 25%;
  }

  [am-Grid-Col~="wide:2"] {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
  }

  [am-Grid-Col~="wide:1"] {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
}
