@mixin col($size) {
  @if ($size == 12) {
    flex: 0 0 100%;
		padding-left: $gap;
		padding-right: $gap;
    width: 100%;
  } @else {
    flex: 0 0 percentage(calc($size / 12));
    margin: 0 auto;
    padding-left: $gap;
    padding-right: $gap;
    width: percentage(calc($size / 12));
  }
}

.row {
  display: flex;
  flex-direction: column;

  @media (min-width: $breakpoint-desktop) {
    flex-direction: row;
  }
}

.col-12 {
  @include col(12);
}

@media (min-width: $breakpoint-desktop) {
  .col-lg-4 {
    @include col(4);
  }

  .col-lg-6 {
    @include col(6);
  }

  .col-lg-8 {
    @include col(8);
  }
}

@media (min-width: $breakpoint-tablet) {
  .col-md-4 {
    @include col(4);
  }

  .col-md-6 {
    @include col(6);
  }

  .col-md-8 {
    @include col(8);
  }
}