@mixin column($size) {
  grid-column: span $size;
  width:100%;
  margin:0;

  & > *:last-child {
    margin-bottom:0!important;
  }
}

@mixin column-list() {
  &-1 {@include column(1);}
  &-2 {@include column(2);}
  &-3 {@include column(3);}
  &-4 {@include column(4);}
  &-5 {@include column(5);}
  &-6 {@include column(6);}
  &-7 {@include column(7);}
  &-8 {@include column(8);}
  &-9 {@include column(9);}
  &-10 {@include column(10);}
  &-11 {@include column(11);}
  &-12 {@include column(12);}
}

.columns {
  display:grid;
  grid-gap:$lineheight;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  padding:$lineheight;
  &-nogap {
    grid-gap:0px;
  }
}

.column {
  @include column(12);
}

.col {
  @include column-list();
  &-sm {
    @include sm() {
      @include column-list();
    }
  }
  &-md {
    @include md() {
      @include column-list();
    }
  }
  &-lg {
    @include lg() {
      @include column-list();
    }
  }
  &-xl {
    @include xl() {
      @include column-list();
    }
  }
  &-xxl {
    @include xxl() {
      @include column-list();
    }
  }
}