.row,
.cols {
  max-width: var(--columns-width, 80rem);
  margin-left: auto;
  margin-right: auto;
  width: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.row.isFull, .cols.isFull {
  max-width: 100%;
}

.row .row,
.cols .cols {
  margin-left: calc(var(--column-gutter, 2rem) / -2);
  margin-right: calc(var(--column-gutter, 2rem) / -2);
}

.row > .row,
.cols > .cols {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.col {
  flex: 1;
}

.col,
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12 {
  padding: 0 calc(var(--column-gutter, 2rem) / 2);
  max-width: var(--columns-width, 80rem);
}

.cols {
  padding: 0;
}

.isFlush > .row,
.isFlush > .cols,
.isFlush > [class*='col'] {
  padding: 0;
}

.col1 {
  flex: 0 0 calc(100% / (12/1));
  max-width: calc(100% / (12/1));
}

.col2 {
  flex: 0 0 calc(100% / (12/2));
  max-width: calc(100% / (12/2));
}

.col3 {
  flex: 0 0 calc(100% / (12/3));
  max-width: calc(100% / (12/3));
}

.col4 {
  flex: 0 0 calc(100% / (12/4));
  max-width: calc(100% / (12/4));
}

.col5 {
  flex: 0 0 calc(100% / (12/5));
  max-width: calc(100% / (12/5));
}

.col6 {
  flex: 0 0 calc(100% / (12/6));
  max-width: calc(100% / (12/6));
}

.col7 {
  flex: 0 0 calc(100% / (12/7));
  max-width: calc(100% / (12/7));
}

.col8 {
  flex: 0 0 calc(100% / (12/8));
  max-width: calc(100% / (12/8));
}

.col9 {
  flex: 0 0 calc(100% / (12/9));
  max-width: calc(100% / (12/9));
}

.col10 {
  flex: 0 0 calc(100% / (12/10));
  max-width: calc(100% / (12/10));
}

.col11 {
  flex: 0 0 calc(100% / (12/11));
  max-width: calc(100% / (12/11));
}

.col12 {
  flex: 0 0 calc(100% / (12/12));
  max-width: calc(100% / (12/12));
}

.isOrder1 {
  order: 1;
}

.isOrder2 {
  order: 2;
}

.isOrder3 {
  order: 3;
}

.isOrder4 {
  order: 4;
}

.isOrder5 {
  order: 5;
}

.isOrder6 {
  order: 6;
}

.isOrder7 {
  order: 7;
}

.isOrder8 {
  order: 8;
}

.isOrder9 {
  order: 9;
}

.isOrder10 {
  order: 10;
}

.isOrder11 {
  order: 11;
}

.isOrder12 {
  order: 12;
}

.isOffset1 {
  margin-left: calc(100% / (12/1));
}

.isOffset2 {
  margin-left: calc(100% / (12/2));
}

.isOffset3 {
  margin-left: calc(100% / (12/3));
}

.isOffset4 {
  margin-left: calc(100% / (12/4));
}

.isOffset5 {
  margin-left: calc(100% / (12/5));
}

.isOffset6 {
  margin-left: calc(100% / (12/6));
}

.isOffset7 {
  margin-left: calc(100% / (12/7));
}

.isOffset8 {
  margin-left: calc(100% / (12/8));
}

.isOffset9 {
  margin-left: calc(100% / (12/9));
}

.isOffset10 {
  margin-left: calc(100% / (12/10));
}

.isOffset11 {
  margin-left: calc(100% / (12/11));
}

[class*=' multiCol'],
[class^='multiCol'] {
  column-gap: var(--column-gap);
}

.multiCol2 {
  column-count: 2;
}

.multiCol3 {
  column-count: 3;
}

.multiCol4 {
  column-count: 4;
}