// Farhan
// Usage for Grid system:
// <section class="Grid -middle -center">
//    <article class="Cell -6of12 -12-mobile -6-tablet"></article>
//    <article class="Cell -6of12 -12-mobile -6-tablet"></article>
// </section>
  .Grid{
    display: flex; flex-wrap: wrap;
    &.\-top{align-items: flex-start;}
    &.\-middle{align-items: center;}
    &.\-bottom{align-items: flex-end;}
    &.\-stretch{align-items: stretch;}
    &.\-baseline{align-items: baseline;}
    &.\-left{justify-content: flex-start;}
    &.\-center{justify-content: center;}
    &.\-right{justify-content: flex-end;}
    &.\-between{justify-content: space-between;}
    &.\-around{justify-content: space-around;}
    // To flip around flex direction if needed
    &.\-column{flex-direction: column;}
  }
  .Cell{
    box-sizing: border-box; flex-shrink: 0;
    &.\-1of12{width: calc(100% * 1 / 12);}
    &.\-2of12{width: calc(100% * 2 / 12);}
    &.\-3of12{width: calc(100% * 3 / 12);}
    &.\-4of12{width: calc(100% * 4 / 12);}
    &.\-5of12{width: calc(100% * 5 / 12);}
    &.\-6of12{width: calc(100% * 6 / 12);}
    &.\-7of12{width: calc(100% * 7 / 12);}
    &.\-8of12{width: calc(100% * 8 / 12);}
    &.\-9of12{width: calc(100% * 9 / 12);}
    &.\-10of12{width: calc(100% * 10 / 12);}
    &.\-11of12{width: calc(100% * 11 / 12);}
    &.\-12of12{width: calc(100%);}
    &.-fill{width: 0; min-width: 0; flex-grow: 1;}
      @include media('<md'){
        &.\-6-mobile{width: calc(100% * 6 / 12)!important;}
        &.\-12-mobile{width: calc(100%)!important;}
        &.\-11-mobile{width: calc(89%)!important;}
        &.\-10-mobile{width: calc(79%)!important;}
        &.\-9-mobile{width: calc(69%)!important;}
        &.\-8-mobile{width: calc(59%)!important;}
        &.\-7-mobile{width: calc(49%)!important;}
      }
      @include media('<lg'){
        &.\-6-tablet{width: calc(100% * 6 / 12)!important;}
        &.\-12-tablet{width: calc(100%)}
        &.\-11-tablet{width: calc(89%)}
        &.\-10-tablet{width: calc(79%)}
        &.\-9-tablet{width: calc(69%)}
        &.\-8-tablet{width: calc(59%)}
        &.\-7-tablet{width: calc(49%)}
      }
  }