.col-small-centered {
  @include make-col-ready();
  @include make-col(8);
  margin: 0 auto; 
  @include media-breakpoint-down(xs) {
    @include make-col(12);
    max-width: $spacer*19;
  }
  padding-left: 0;
  padding-right: 0;
  &--with-right-background {
    @include media-breakpoint-up(md) {
      @include make-col(6);
      @include make-col-offset(2);
    }
  }
}

.col-medium-centered {
  @include make-col-ready();
  @include make-col(10);
  margin: 0 auto;
  @include media-breakpoint-down(xs) {
    @include make-col(12);
  }
  padding-left: 0;
  padding-right: 0;
}

.col-buttons {
  @include make-row();

  .col-buttons-half {
    @include make-col-ready();

    &:first-child {
      order: 2;
    }
    &:last-child {
      order: 1;
    }

    @include media-breakpoint-up(sm) {
      @include make-col(6);

      &:first-child {
        order: 1;
      }
      &:last-child {
        order: 2;
      }
    }
  }
}

.col-halves {
  @include make-row();

  .col-half {
    @include make-col-ready();
    @include make-col(6);
  }
}

.col-left-aligned {
  &--content {
    @include make-col-ready();
    text-align: left;

    @include media-breakpoint-up(md) {
      @include make-col(9);
      margin-bottom: $spacer*2;
    }
  }
  &--action {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
      @include make-col(3);
    }

    p.icon {
      text-align: center;
      display: none;

      @include media-breakpoint-up(md) {
        display: block;
      }
    }
  }
}

.col-right-aligned {
  &--content {
    @include make-col-ready();
    text-align: right;

    @include media-breakpoint-up(md) {
      @include make-col(9);
      margin-bottom: $spacer*2;
    }
  }
  &--action {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
      @include make-col(3);
    }
    text-align: right;
  }
}
