// Flexbox Grid spans
// Fractional naming and units
// because there is amount of cols defined upfront

.flex {
  // setting a standard for given widths
  >.span-twothird,
  >.span-half,
  >.span-third,
  >.span-quarter,
  >.span-fifth,
  >.span-media,
  >.span-auto {
    flex-grow: 0;
    flex-shrink: 0;
  }
  >.span-full        { flex-basis: 100%; }
  >.span-twothird    { flex-basis: 66.6666%; }
  >.span-half        { flex-basis: 50%; }
  >.span-third       { flex-basis: 33.3333%; }
  >.span-quarter     { flex-basis: 25%; }
  >.span-fifth       { flex-basis: 20%; }
  >.span-auto        { flex:       0 0 auto; }
}

// .flex.gap_s {
//   >.span-full        { flex-basis: calc(100% - var(--space-s));  }
//   >.span-twothird    { flex-basis: calc(66.6666% - var(--space-s)); }
//   >.span-half        { flex-basis: calc(50% - var(--space-s)); }
//   >.span-third       { flex-basis: calc(33.3333% - var(--space-s)); }
//   >.span-quarter     { flex-basis: calc(25% - var(--space-s)); }
//   >.span-fifth       { flex-basis: calc(20%; - var(--space-s)); }
// }