/*
 |--------------------------------------------------------------------------
 |  Create all the utility classes
 |  Recommended to use Purge CSS to clean up for production
 |--------------------------------------------------------------------------
 */

// Single Classes
// Section
.section {
  width: 100%;
}

// Container
.container {
  @include spaceX(padding-left padding-right, 1);
  @include center();
  width: 100%;
  max-width: $bk-maxWidth;

  .container {
    padding-left: 0;
    padding-right: 0;
  }
}

// Row
.row {
  @include row-margin();
  width: auto;
  display: flex;
  flex-flow: row wrap;
}

// Col
.col {
  @include col-padding();
}

[class*="stack"] > * {
  margin-top: 0;
  margin-bottom: 0;
}

// Loop that shit!
$pxLoopCountSizing: 32;
$pxLoopCountMarginPadding: 17;
$pxBaseValue: $bk-gutter;
$fluidLoopCount: 11;

@each $key, $value in $bk-breakpoints {
  $from: $value;
  $bpPrefix: #{$key}\:;

  @if $key == 'min' {
    $from: 0px;
    $bpPrefix: '';
  }

  @media (min-width: #{$from}) {
    // Widths
    @for $i from 1 through 6 {
      .#{$bpPrefix}w-#{$i}\/#{6} {
        width: calc(#{$i} / #{6} * 100%);
      }

      .#{$bpPrefix}offset-#{$i}\/#{6} {
        margin-left: calc(#{$i} / #{6} * 100%);
      }

      .#{$bpPrefix}push-left-#{$i}\/#{6} {
        left: calc(#{$i} / #{6} * 100%);
      }

      .#{$bpPrefix}pull-left-#{$i}\/#{6} {
        left: calc(#{$i} / #{6} * -100%);
      }

      .#{$bpPrefix}push-right-#{$i}\/#{6} {
        right: calc(#{$i} / #{6} * 100%);
      }

      .#{$bpPrefix}pull-right-#{$i}\/#{6} {
        right: calc(#{$i} / #{6} * -100%);
      }
    }

    @for $i from 1 through 12 {
      .#{$bpPrefix}w-#{$i}\/#{12} {
        width: calc(#{$i} / #{12} * 100%);
      }

      .#{$bpPrefix}offset-#{$i}\/#{12} {
        margin-left: calc(#{$i} / #{12} * 100%);
      }

      .#{$bpPrefix}push-left-#{$i}\/#{12} {
        left: calc(#{$i} / #{12} * 100%);
      }

      .#{$bpPrefix}pull-left-#{$i}\/#{12} {
        left: calc(#{$i} / #{12} * -100%);
      }

      .#{$bpPrefix}push-right-#{$i}\/#{12} {
        right: calc(#{$i} / #{12} * 100%);
      }

      .#{$bpPrefix}pull-right-#{$i}\/#{12} {
        right: calc(#{$i} / #{12} * -100%);
      }
    }

    @for $i from 1 through 24 {
      .#{$bpPrefix}w-#{$i}\/#{24} {
        width: calc(#{$i} / #{24} * 100%);
      }

      .#{$bpPrefix}offset-#{$i}\/#{24} {
        margin-left: calc(#{$i} / #{24} * 100%);
      }

      .#{$bpPrefix}push-left-#{$i}\/#{24} {
        left: calc(#{$i} / #{24} * 100%);
      }

      .#{$bpPrefix}pull-left-#{$i}\/#{24} {
        left: calc(#{$i} / #{24} * -100%);
      }

      .#{$bpPrefix}push-right-#{$i}\/#{24} {
        right: calc(#{$i} / #{24} * 100%);
      }

      .#{$bpPrefix}pull-right-#{$i}\/#{24} {
        right: calc(#{$i} / #{24} * -100%);
      }
    }

    @for $i from 1 through $pxLoopCountSizing {
      $pxValue: $pxBaseValue * $i;

      .#{$bpPrefix}w-#{$value} {
        width: #{$pxValue};
      }
    }

    .#{$bpPrefix}w-screen {
      width: 100vw;
    }

    .#{$bpPrefix}w-full {
      width: 100%;
    }

    .#{$bpPrefix}min-w-0 {
      min-width: 0;
    }

    .#{$bpPrefix}min-w-full {
      min-width: 100%;
    }


    // Heights
    @for $i from 1 through $pxLoopCountSizing {
      $pxValue: $pxBaseValue * $i;

      .#{$bpPrefix}h-#{$value} {
        height: #{$pxValue};
      }
    }

    .#{$bpPrefix}h-screen {
      height: 100vw;
    }

    .#{$bpPrefix}h-full {
      height: 100%;
    }

    .#{$bpPrefix}min-h-0 {
      min-height: 0;
    }

    .#{$bpPrefix}min-h-full {
      min-height: 100%;
    }

    .#{$bpPrefix}min-h-screen {
      min-height: 100vh;
    }

    .#{$bpPrefix}max-h-full {
      max-height: 100%;
    }

    .#{$bpPrefix}max-h-screen {
      max-height: 100vh;
    }

    // Stacks
    .#{$bpPrefix}stack-0 > * + * {
      margin-top: 0;
    }

    .#{$bpPrefix}stack-0\.25 > * + * {
      @include spaceY(margin-top, 0.25)
    }

    .#{$bpPrefix}stack-0\.5 > * + * {
      @include spaceY(margin-top, 0.5)
    }

    .#{$bpPrefix}stack-0\.75 > * + * {
      @include spaceY(margin-top, 0.75)
    }

    .#{$bpPrefix}stack > * + *,
    .#{$bpPrefix}stack-1 > * + * {
      @include spaceY(margin-top, 1)
    }

    .#{$bpPrefix}stack-1\.5 > * + * {
      @include spaceY(margin-top, 1.5)
    }

    .#{$bpPrefix}stack-2 > * + * {
      @include spaceY(margin-top, 2)
    }

    .#{$bpPrefix}stack-2\.5 > * + * {
      @include spaceY(margin-top, 2.5)
    }

    .#{$bpPrefix}stack-3 > * + * {
      @include spaceY(margin-top, 3)
    }

    .#{$bpPrefix}stack-0\.25 > .a-headline {
      @include spaceY(margin-top, 0.5);

      &:first-child {
        margin-top: 0;
      }
    }

    .#{$bpPrefix}stack-0\.5 > .a-headline {
      @include spaceY(margin-top, 1);

      &:first-child {
        margin-top: 0;
      }
    }

    .#{$bpPrefix}stack-0\.75 > .a-headline {
      @include spaceY(margin-top, 1.5);

      &:first-child {
        margin-top: 0;
      }
    }

    .#{$bpPrefix}stack > .a-headline,
    .#{$bpPrefix}stack-1 > .a-headline {
      @include spaceY(margin-top, 2);

      &:first-child {
        margin-top: 0;
      }
    }

    .#{$bpPrefix}stack-1\.5 > .a-headline {
      @include spaceY(margin-top, 3);

      &:first-child {
        margin-top: 0;
      }
    }

    .#{$bpPrefix}stack-2 > .a-headline {
      @include spaceY(margin-top, 4);

      &:first-child {
        margin-top: 0;
      }
    }

    .#{$bpPrefix}stack-2\.5 > .a-headline {
      @include spaceY(margin-top, 5);

      &:first-child {
        margin-top: 0;
      }
    }

    .#{$bpPrefix}stack-3 > .a-headline {
      @include spaceY(margin-top, 6);

      &:first-child {
        margin-top: 0;
      }
    }

    // Margins
    .#{$bpPrefix}mx-auto {
      margin-left: auto;
      margin-right: auto;
    }

    .#{$bpPrefix}ml-auto {
      margin-left: auto;
    }

    .#{$bpPrefix}mr-auto {
      margin-right: auto;
    }


    // Display
    .#{$bpPrefix}block {
      display: block;
    }

    .#{$bpPrefix}inline-block {
      display: inline-block;
    }

    .#{$bpPrefix}inline {
      display: inline;
    }

    .#{$bpPrefix}flex {
      display: flex;
    }

    .#{$bpPrefix}inline-flex {
      display: inline-flex;
    }

    .#{$bpPrefix}table {
      display: table;
    }

    .#{$bpPrefix}table-row {
      display: table-row;
    }

    .#{$bpPrefix}table-cell {
      display: table-cell;
    }

    .#{$bpPrefix}hidden {
      display: none;
    }

    // Float
    .#{$bpPrefix}float-left {
      float: left;
    }

    .#{$bpPrefix}float-right {
      float: right;
    }

    .#{$bpPrefix}float-none {
      float: none;
    }

    .#{$bpPrefix}clearfix {
      &::after {
        content: '';
        display: table;
        clear: both;
      }
    }


    // Object Fit
    .#{$bpPrefix}object-contain {
      object-fit: contain;
    }

    .#{$bpPrefix}object-cover {
      object-fit: cover;
    }

    .#{$bpPrefix}object-fill {
      object-fit: fill;
    }

    .#{$bpPrefix}object-none {
      object-fit: none;
    }

    .#{$bpPrefix}object-scale-down {
      object-fit: scale-down;
    }


    // Object Position
    .#{$bpPrefix}object-bottom {
      object-position: bottom;
    }

    .#{$bpPrefix}object-center {
      object-position: center;
    }

    .#{$bpPrefix}object-left {
      object-position: left;
    }

    .#{$bpPrefix}object-left-bottom {
      object-position: left bottom;
    }

    .#{$bpPrefix}object-left-top {
      object-position: left top;
    }

    .#{$bpPrefix}object-right {
      object-position: right;
    }

    .#{$bpPrefix}object-right-bottom {
      object-position: right bottom;
    }

    .#{$bpPrefix}object-right-top {
      object-position: right top;
    }

    .#{$bpPrefix}object-top {
      object-position: top;
    }


    // Overflow
    .#{$bpPrefix}overflow-auto {
      overflow: auto;
    }

    .#{$bpPrefix}overflow-hidden {
      overflow: hidden;
    }

    .#{$bpPrefix}overflow-visible {
      overflow: visible;
    }

    .#{$bpPrefix}overflow-scroll {
      overflow: scroll;
    }

    .#{$bpPrefix}overflow-x-auto {
      overflow-x: auto;
    }

    .#{$bpPrefix}overflow-y-auto {
      overflow-y: auto;
    }

    .#{$bpPrefix}overflow-x-hidden {
      overflow-x: hidden;
    }

    .#{$bpPrefix}overflow-y-hidden {
      overflow-y: hidden;
    }

    .#{$bpPrefix}overflow-x-visible {
      overflow-x: visible;
    }

    .#{$bpPrefix}overflow-y-visible {
      overflow-y: visible;
    }

    .#{$bpPrefix}overflow-x-scroll {
      overflow-x: scroll;
    }

    .#{$bpPrefix}overflow-y-scroll {
      overflow-y: scroll;
    }

    .#{$bpPrefix}scrolling-touch {
      -webkit-overflow-scrolling: touch;
    }

    .#{$bpPrefix}scrolling-auto {
      -webkit-overflow-scrolling: auto;
    }


    // Position
    .#{$bpPrefix}static {
      position: static;
    }

    .#{$bpPrefix}fixed {
      position: fixed;
    }

    .#{$bpPrefix}absolute {
      position: absolute;
    }

    .#{$bpPrefix}relative {
      position: relative;
    }

    .#{$bpPrefix}sticky {
      position: sticky;
    }


    // Top / Right / Bottom / Left
    .#{$bpPrefix}inset-0 {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .#{$bpPrefix}inset-y-0 {
      top: 0;
      bottom: 0;
    }

    .#{$bpPrefix}inset-x-0 {
      right: 0;
      left: 0;
    }

    .#{$bpPrefix}top-0 {
      top: 0;
    }

    .#{$bpPrefix}right-0 {
      right: 0;
    }

    .#{$bpPrefix}bottom-0 {
      bottom: 0;
    }

    .#{$bpPrefix}left-0 {
      left: 0;
    }

    .#{$bpPrefix}inset-auto {
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
    }

    .#{$bpPrefix}inset-y-auto {
      top: auto;
      bottom: auto;
    }

    .#{$bpPrefix}inset-x-auto {
      left: auto;
      right: auto;
    }

    .#{$bpPrefix}top-auto {
      top: auto;
    }

    .#{$bpPrefix}bottom-auto {
      bottom: auto;
    }

    .#{$bpPrefix}left-auto {
      left: auto;
    }

    .#{$bpPrefix}right-auto {
      right: auto;
    }


    // Visibility
    .#{$bpPrefix}visible {
      visibility: visible;
    }

    .#{$bpPrefix}invisible {
      visibility: hidden;
    }

    // z-index
    .#{$bpPrefix}z-0 {
      z-index: 0;
    }

    .#{$bpPrefix}z-10 {
      z-index: 10;
    }

    .#{$bpPrefix}z-20 {
      z-index: 20;
    }

    .#{$bpPrefix}z-30 {
      z-index: 30;
    }

    .#{$bpPrefix}z-40 {
      z-index: 40;
    }

    .#{$bpPrefix}z-50 {
      z-index: 50;
    }

    .#{$bpPrefix}z-auto {
      z-index: auto;
    }

    // Flex Direction
    .#{$bpPrefix}flex-row {
      flex-direction: row;
    }

    .#{$bpPrefix}flex-row-reverse {
      flex-direction: row-reverse;
    }

    .#{$bpPrefix}flex-col {
      flex-direction: column;
    }

    .#{$bpPrefix}flex-col-reverse {
      flex-direction: column-reverse;
    }

    // Flex Wrap
    .#{$bpPrefix}flex-no-wrap {
      flex-wrap: nowrap;
    }

    .#{$bpPrefix}flex-wrap {
      flex-wrap: wrap;
    }

    .#{$bpPrefix}flex-wrap-reverse {
      flex-wrap: wrap-reverse;
    }

    // Align Items
    .#{$bpPrefix}items-stretch {
      align-items: stretch;
    }

    .#{$bpPrefix}items-start {
      align-items: flex-start;
    }

    .#{$bpPrefix}items-center {
      align-items: center;
    }

    .#{$bpPrefix}items-end {
      align-items: flex-end;
    }

    .#{$bpPrefix}items-baseline {
      align-items: baseline;
    }

    // Align Content
    .#{$bpPrefix}content-start {
      align-content: flex-start;
    }

    .#{$bpPrefix}content-center {
      align-content: center;
    }

    .#{$bpPrefix}content-end {
      align-content: flex-end;
    }

    .#{$bpPrefix}content-between {
      align-content: space-between;
    }

    .#{$bpPrefix}content-around {
      align-content: space-around;
    }

    // Align Self
    .#{$bpPrefix}self-auto {
      align-self: auto;
    }

    .#{$bpPrefix}self-start {
      align-self: flex-start;
    }

    .#{$bpPrefix}self-center {
      align-self: center;
    }

    .#{$bpPrefix}self-end {
      align-self: flex-end;
    }

    .#{$bpPrefix}self-stretch {
      align-self: stretch;
    }

    // Justify Content
    .#{$bpPrefix}justify-start {
      justify-content: flex-start;
    }

    .#{$bpPrefix}justify-center {
      justify-content: center;
    }

    .#{$bpPrefix}justify-end {
      justify-content: flex-end;
    }

    .#{$bpPrefix}justify-between {
      justify-content: space-between;
    }

    .#{$bpPrefix}justify-around {
      justify-content: space-around;
    }

    // Flex
    .#{$bpPrefix}flex-initial {
      flex: 0 1 auto;
    }

    .#{$bpPrefix}flex-1 {
      flex: 1 1 0%;
    }

    .#{$bpPrefix}flex-auto {
      flex: 1 1 auto;
    }

    .#{$bpPrefix}flex-none {
      flex: none;
    }

    // Flex Grow
    .#{$bpPrefix}flex-grow {
      flex-grow: 1;
    }

    .#{$bpPrefix}flex-grow-0 {
      flex-grow: 0;
    }

    // Flex Shrink
    .#{$bpPrefix}flex-shrink {
      flex-shrink: 1;
    }

    .#{$bpPrefix}flex-shrink-0 {
      flex-shrink: 0;
    }

    // Order
    .#{$bpPrefix}order-first {
      order: -9999;
    }

    .#{$bpPrefix}order-last {
      order: 9999;
    }

    .#{$bpPrefix}order-none {
      order: 0;
    }

    .#{$bpPrefix}order-1 {
      order: 1;
    }

    .#{$bpPrefix}order-2 {
      order: 2;
    }

    .#{$bpPrefix}order-3 {
      order: 3;
    }

    .#{$bpPrefix}order-4 {
      order: 4;
    }

    .#{$bpPrefix}order-5 {
      order: 5;
    }

    .#{$bpPrefix}order-6 {
      order: 6;
    }

    .#{$bpPrefix}order-7 {
      order: 7;
    }

    .#{$bpPrefix}order-8 {
      order: 8;
    }

    .#{$bpPrefix}order-9 {
      order: 9;
    }

    .#{$bpPrefix}order-10 {
      order: 10;
    }

    .#{$bpPrefix}order-11 {
      order: 11;
    }

    .#{$bpPrefix}order-12 {
      order: 12;
    }


    // Table Layout
    .#{$bpPrefix}table-auto {
      table-layout: auto;
    }

    .#{$bpPrefix}table-fixed {
      table-layout: fixed;
    }


    // Text Align
    .#{$bpPrefix}text-left {
      text-align: left;
    }

    .#{$bpPrefix}text-center {
      text-align: center;
    }

    .#{$bpPrefix}text-right {
      text-align: right;
    }

    .#{$bpPrefix}text-justify {
      text-align: justify;
    }


    // Whitespace
    .#{$bpPrefix}whitespace-normal {
      white-space: normal;
    }

    .#{$bpPrefix}whitespace-no-wrap {
      white-space: nowrap;
    }

    .#{$bpPrefix}whitespace-pre {
      white-space: pre;
    }

    .#{$bpPrefix}whitespace-pre-line {
      white-space: pre-line;
    }

    .#{$bpPrefix}whitespace-pre-wrap {
      white-space: pre-wrap;
    }


    // Word Break
    .#{$bpPrefix}break-normal {
      word-break: normal;
      overflow-wrap: normal
    }

    .#{$bpPrefix}break-words {
      overflow-wrap: break-word;
    }

    .#{$bpPrefix}break-all {
      word-break: break-all;
    }

    .#{$bpPrefix}truncate {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }


    // Paddings & Margins
    // PX Values
    @for $i from 0 through $pxLoopCountMarginPadding {
      $pxValue: $pxBaseValue * $i;

      @if $i == 0 {
        $pxValue: strip-unit($pxValue);
      }

      .#{$bpPrefix}p-#{$i} {
        padding: #{$pxValue};
      }

      .#{$bpPrefix}pl-#{$i} {
        padding-left: #{$pxValue};
      }

      .#{$bpPrefix}pr-#{$i} {
        padding-right: #{$pxValue};
      }

      .#{$bpPrefix}pt-#{$i} {
        padding-top: #{$pxValue};
      }

      .#{$bpPrefix}pb-#{$i} {
        padding-bottom: #{$pxValue};
      }

      .#{$bpPrefix}px-#{$i} {
        padding-left: #{$pxValue};
        padding-right: #{$pxValue};
      }

      .#{$bpPrefix}py-#{$i} {
        padding-top: #{$pxValue};
        padding-bottom: #{$pxValue};
      }

      .#{$bpPrefix}m-#{$i} {
        margin: #{$pxValue};
      }

      .#{$bpPrefix}ml-#{$i} {
        margin-left: #{$pxValue};
      }

      .#{$bpPrefix}mr-#{$i} {
        margin-right: #{$pxValue};
      }

      .#{$bpPrefix}mt-#{$i} {
        margin-top: #{$pxValue};
      }

      .#{$bpPrefix}mb-#{$i} {
        margin-bottom: #{$pxValue};
      }

      .#{$bpPrefix}mx-#{$i} {
        margin-left: #{$pxValue};
        margin-right: #{$pxValue};
      }

      .#{$bpPrefix}my-#{$i} {
        margin-top: #{$pxValue};
        margin-bottom: #{$pxValue};
      }

      .#{$bpPrefix}-m-#{$i} {
        margin: -#{$pxValue};
      }

      .#{$bpPrefix}-ml-#{$i} {
        margin-left: -#{$pxValue};
      }

      .#{$bpPrefix}-mr-#{$i} {
        margin-right: -#{$pxValue};
      }

      .#{$bpPrefix}-mt-#{$i} {
        margin-top: -#{$pxValue};
      }

      .#{$bpPrefix}-mb-#{$i} {
        margin-bottom: -#{$pxValue};
      }

      .#{$bpPrefix}-mx-#{$i} {
        margin-left: -#{$pxValue};
        margin-right: -#{$pxValue};
      }

      .#{$bpPrefix}-my-#{$i} {
        margin-top: -#{$pxValue};
        margin-bottom: -#{$pxValue};
      }
    }

  }

  @for $i from 0 through $fluidLoopCount {
    .p-#{$i}--fluid {
      @include space(padding, $i);
    }

    .p-#{$i}\.5--fluid {
      @include space(padding, $i + 0.5);
    }

    .pl-#{$i}--fluid {
      @include space(padding-left, $i);
    }

    .pl-#{$i}\.5--fluid {
      @include space(padding-left, $i + 0.5);
    }

    .pr-#{$i}--fluid {
      @include space(padding-right, $i);
    }

    .pt-#{$i}--fluid {
      @include spaceY(padding-top, $i);
    }

    .pt-#{$i}\.5--fluid {
      @include spaceY(padding-top, $i + 0.5);
    }

    .pb-#{$i}--fluid {
      @include spaceY(padding-bottom, $i);
    }

    .pb-#{$i}\.5--fluid {
      @include spaceY(padding-bottom, $i + 0.5);
    }

    .px-#{$i}--fluid {
      @include space(padding-left padding-right, $i);
    }

    .px-#{$i}\.5--fluid {
      @include space(padding-left padding-right, $i + 0.5);
    }

    .py-#{$i}--fluid {
      @include spaceY(padding-top padding-bottom, $i);
    }

    .py-#{$i}\.5--fluid {
      @include spaceY(padding-top padding-bottom, $i + 0.5);
    }

    .m-#{$i}--fluid {
      @include space(margin, $i);
    }

    .m-#{$i}\.5--fluid {
      @include space(margin, $i + 0.5);
    }

    .ml-#{$i}--fluid {
      @include space(margin-left, $i);
    }

    .ml-#{$i}\.5--fluid {
      @include space(margin-left, $i + 0.5);
    }

    .mr-#{$i}--fluid {
      @include space(margin-right, $i);
    }

    .mr-#{$i}\.5--fluid {
      @include space(margin-right, $i + 0.5);
    }

    .mt-#{$i}--fluid {
      @include spaceY(margin-top, $i);
    }

    .mt-#{$i}\.5--fluid {
      @include spaceY(margin-top, $i + 0.5);
    }

    .mb-#{$i}--fluid {
      @include spaceY(margin-bottom, $i);
    }

    .mb-#{$i}\.5--fluid {
      @include spaceY(margin-bottom, $i + 0.5);
    }

    .mx-#{$i}--fluid {
      @include space(margin-left margin-right, $i);
    }

    .mx-#{$i}\.5--fluid {
      @include space(margin-left margin-right, $i + 0.5);
    }

    .my-#{$i}--fluid {
      @include spaceY(margin-top margin-bottom, $i);
    }

    .my-#{$i}\.5--fluid {
      @include spaceY(margin-top margin-bottom, $i + 0.5);
    }

    .-m-#{$i}--fluid {
      @include space(margin, -$i);
    }

    .-m-#{$i}\.5--fluid {
      @include space(margin, -$i - 0.5);
    }

    .-ml-#{$i}--fluid {
      @include space(margin-left, -$i);
    }

    .-ml-#{$i}\.5--fluid {
      @include space(margin-left, -$i - 0.5);
    }

    .-mr-#{$i}--fluid {
      @include space(margin-right, -$i);
    }

    .-mr-#{$i}\.5--fluid {
      @include space(margin-right, -$i - 0.5);
    }

    .-mt-#{$i}--fluid {
      @include spaceY(margin-top, -$i);
    }

    .-mt-#{$i}\.5--fluid {
      @include spaceY(margin-top, -$i - 0.5);
    }

    .-mb-#{$i}--fluid {
      @include spaceY(margin-bottom, -$i);
    }

    .-mb-#{$i}\.5--fluid {
      @include spaceY(margin-bottom, -$i - 0.5);
    }

    .-mx-#{$i}\.5--fluid {
      @include space(margin-left margin-right, -$i - 0.5);
    }

    .-mx-#{$i}--fluid {
      @include space(margin-left margin-right, -$i);
    }

    .-mx-#{$i}\.5--fluid {
      @include space(margin-left margin-right, -$i - 0.5);
    }

    .-my-#{$i}--fluid {
      @include spaceY(margin-top margin-bottom, -$i);
    }

    .-my-#{$i}\.5--fluid {
      @include spaceY(margin-top margin-bottom, -$i - 0.5);
    }
  }
}