$vl-amount: 100 / 12 / 2; // Get width of one column, split it in two

// Classes to visually pull-image left or right from it's original-content
@mixin offset($vl-side: "left") {
  @if $vl-side == "left" {
    margin-left: -#{$vl-amount + "%"};
  } @else if $vl-side == "right" {
    margin-right: -#{$vl-amount + "%"};
  } @else if $vl-side == "none" {
    margin-left: 0;
    margin-right: 0;
  }
}

.vl-u-offset--spacing {
  padding: 0 #{$vl-amount + "%"} 1rem;
}

.vl-u-offset--left {
  @include offset("left");

  @include respond-to(small) {
    @include offset("none");
  }

  &.vl-u-offset--spacing {
    padding-left: 0;
  }
}

.vl-u-offset--right {
  @include offset("right");

  @include respond-to(small) {
    @include offset("none");
  }

  &.vl-u-offset--spacing {
    padding-right: 0;
  }
}