.one-unit {
    flex-basis: calc(100% / 12 - 1%);
  }
  
  .two-unit {
    flex-basis: calc((100% / 12) * 2 - 1%);
  }
  
  .three-unit {
    flex-basis: calc((100% / 12) * 3 - 1%);
  }
  
  .four-unit {
    flex-basis: calc((100% / 12) * 4 - 1%);
  }
  
  .five-unit {
    flex-basis: calc((100% / 12) * 5 - 1%);
  }
  
  .six-unit {
    flex-basis: calc((100% / 12) * 6 - 1%);
  }
  
  .seven-unit {
    flex-basis: calc((100% / 12) * 7 - 1%);
  }
  
  .eight-unit {
    flex-basis: calc((100% / 12) * 8 - 1%);
  }
  
  .nine-unit {
    flex-basis: calc((100% / 12) * 9 - 1%);
  }
  
  .ten-unit {
    flex-basis: calc((100% / 12) * 10 - 1%);
  }
  
  .eleven-unit {
    flex-basis: calc((100% / 12) * 11 - 1%);
  }
  
  .twelve-unit {
    flex-basis: calc((100% / 12) * 12);
  }
  
  /*=====================================================
  RIGHT GAP UNITS FOR 12 COLUMN GRID 
  =======================================================
  */
  
  .one-unit-gap-r {
    margin-right: calc(100% / 12);
  }
  
  .two-unit-gap-r {
    margin-right: calc((100% / 12) * 2);
  }
  
  .three-unit-gap-r {
    margin-right: calc((100% / 12) * 3);
  }
  
  .four-unit-gap-r {
    margin-right: calc((100% / 12) * 4);
  }
  
  .five-unit-gap-r {
    margin-right: calc((100% / 12) * 5);
  }
  
  .six-unit-gap-r {
    margin-right: calc((100% / 12) * 6);
  }
  
  .seven-unit-gap-r {
    margin-right: calc((100% / 12) * 7);
  }
  
  .eight-unit-gap-r {
    margin-right: calc((100% / 12) * 8);
  }
  
  .nine-unit-gap-r {
    margin-right: calc((100% / 12) * 9);
  }
  
  .ten-unit-gap-r {
    margin-right: calc((100% / 12) * 10);
  }
  
  .eleven-unit-gap-r {
    margin-right: calc((100% / 12) * 11);
  }
  
  .twelve-unit-gap-r {
    margin-right: calc((100% / 12) * 12);
  }
  
  /*=====================================================
  LEFT GAP UNITS FOR 12 COLUMN GRID 
  =======================================================
  */
  
  .one-unit-gap-l {
    margin-left: calc(100% / 12);
  }
  
  .two-unit-gap-l {
    margin-left: calc((100% / 12) * 2);
  }
  
  .three-unit-gap-l {
    margin-left: calc((100% / 12) * 3);
  }
  
  .four-unit-gap-l {
    margin-left: calc((100% / 12) * 4);
  }
  
  .five-unit-gap-l {
    margin-left: calc((100% / 12) * 5);
  }
  
  .six-unit-gap-l {
    margin-left: calc((100% / 12) * 6);
  }
  
  .seven-unit-gap-l {
    margin-left: calc((100% / 12) * 7);
  }
  
  .eight-unit-gap-l {
    margin-left: calc((100% / 12) * 8);
  }
  
  .nine-unit-gap-l {
    margin-left: calc((100% / 12) * 9);
  }
  
  .ten-unit-gap-l {
    margin-left: calc((100% / 12) * 10);
  }
  
  .eleven-unit-gap-l {
    margin-left: calc((100% / 12) * 11);
  }
  
  .twelve-unit-gap-l {
    margin-left: calc((100% / 12) * 12);
  }