.q-col {
  position: relative;
  flex: 1 0 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--layout-gutter) / 2);
  padding-left: calc(var(--layout-gutter) / 2);
}
.q-col_size_auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}
.q-col_size_1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}
.q-col_size_2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}
.q-col_size_3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.q-col_size_4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}
.q-col_size_5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}
.q-col_size_6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.q-col_size_7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}
.q-col_size_8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}
.q-col_size_9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.q-col_size_10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}
.q-col_size_11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}
.q-col_size_12 {
  flex: 0 0 100%;
  max-width: 100%;
}
.q-col_offset_0 {
  margin-left: 0%;
}
.q-col_offset_1 {
  margin-left: 8.3333333333%;
}
.q-col_offset_2 {
  margin-left: 16.6666666667%;
}
.q-col_offset_3 {
  margin-left: 25%;
}
.q-col_offset_4 {
  margin-left: 33.3333333333%;
}
.q-col_offset_5 {
  margin-left: 41.6666666667%;
}
.q-col_offset_6 {
  margin-left: 50%;
}
.q-col_offset_7 {
  margin-left: 58.3333333333%;
}
.q-col_offset_8 {
  margin-left: 66.6666666667%;
}
.q-col_offset_9 {
  margin-left: 75%;
}
.q-col_offset_10 {
  margin-left: 83.3333333333%;
}
.q-col_offset_11 {
  margin-left: 91.6666666667%;
}