@include breakpoint($mobile-breakpoint) {
  .col-sm-1 {
    width: calc(8.333333333333% - 30px); /* 1/12 */
  }

  .col-sm-2 {
    width: calc(16.666666666667% - 30px); /* 2/12 */
  }

  .col-sm-3 {
    width: calc(25% - 30px); /* 3/12 */
  }

  .col-sm-4 {
    width: calc(33.333333333333% - 30px); /* 4/12 */
  }

  .col-sm-5 {
    width: calc(41.666666666667% - 30px); /* 5/12 */
  }

  .col-sm-6 {
    width: calc(50% - 30px); /* 6/12 */
  }

  .col-sm-7 {
    width: calc(58.333333333333% - 30px); /* 7/12 */
  }

  .col-sm-8 {
    width: calc(66.666666666667% - 30px); /* 8/12 */
  }

  .col-sm-9 {
    width: calc(75% - 30px); /* 9/12 */
  }

  .col-sm-10 {
    width: calc(83.333333333333% - 30px); /* 10/12 */
  }

  .col-sm-11 {
    width: calc(91.666666666667% - 30px); /* 11/12 */
  }

  .col-sm-12 {
    width: calc(100% - 30px); /* 12/12 */
  }
}

@include breakpoint($tablet-breakpoint) {
  .col-md-1 {
    width: calc(8.333333333333% - 30px); /* 1/12 */
  }

  .col-md-2 {
    width: calc(16.666666666667% - 30px); /* 2/12 */
  }

  .col-md-3 {
    width: calc(25% - 30px); /* 3/12 */
  }

  .col-md-4 {
    width: calc(33.333333333333% - 30px); /* 4/12 */
  }

  .col-md-5 {
    width: calc(41.666666666667% - 30px); /* 5/12 */
  }

  .col-md-6 {
    width: calc(50% - 30px); /* 6/12 */
  }

  .col-md-7 {
    width: calc(58.333333333333% - 30px); /* 7/12 */
  }

  .col-md-8 {
    width: calc(66.666666666667% - 30px); /* 8/12 */
  }

  .col-md-9 {
    width: calc(75% - 30px); /* 9/12 */
  }

  .col-md-10 {
    width: calc(83.333333333333% - 30px); /* 10/12 */
  }

  .col-md-11 {
    width: calc(91.666666666667% - 30px); /* 11/12 */
  }

  .col-md-12 {
    width: calc(100% - 30px); /* 12/12 */
  }
}

@include breakpoint($desktop-breakpoint) {
  .col-lg-1 {
    width: calc(8.333333333333% - 30px); /* 1/12 */
  }

  .col-lg-2 {
    width: calc(16.666666666667% - 30px); /* 2/12 */
  }

  .col-lg-3 {
    width: calc(25% - 30px); /* 3/12 */
  }

  .col-lg-4 {
    width: calc(33.333333333333% - 30px); /* 4/12 */
  }

  .col-lg-5 {
    width: calc(41.666666666667% - 30px); /* 5/12 */
  }

  .col-lg-6 {
    width: calc(50% - 30px); /* 6/12 */
  }

  .col-lg-7 {
    width: calc(58.333333333333% - 30px); /* 7/12 */
  }

  .col-lg-8 {
    width: calc(66.666666666667% - 30px); /* 8/12 */
  }

  .col-lg-9 {
    width: calc(75% - 30px); /* 9/12 */
  }

  .col-lg-10 {
    width: calc(83.333333333333% - 30px); /* 10/12 */
  }

  .col-lg-11 {
    width: calc(91.666666666667% - 30px); /* 11/12 */
  }

  .col-lg-12 {
    width: calc(100% - 30px); /* 12/12 */
  }
}