@mixin make-scale(
  $breakpoint
) {
  @media screen and(min-width: $breakpoint) {
    @content;
  }
}

@mixin make-wrapper(
  $title,
  $margin: $wrapper-margin,
  $s-screen-width: $wrapper-width-s-screen,
  $m-screen-width: $wrapper-width-m-screen,
  $l-screen-width: $wrapper-width-l-screen,
  $xl-screen-width: $wrapper-width-xl-screen
) {
  .wrapper-#{$title} {
    margin: $margin;
    width: $s-screen-width;

    @include make-scale($breakpoint-medium) {
      width: $m-screen-width;
    }

    @include make-scale($breakpoint-large) {
      width: $l-screen-width;
    }

    @include make-scale($breakpoint-xlarge) {
      width: $xl-screen-width;
    }
  }
}

@mixin make-spaced-rows() {
  @for $i from 1 through 9 {
    &.row-margin-top-#{$i} {
      margin-top: #{$i}em;
    }
    &.row-margin-bottom-#{$i} {
      margin-bottom: #{$i}em;
    }
    &.row-margin-both-#{$i} {
      margin: #{$i}em 0;
    }
  }
}

@mixin make-columns(
  $amount,
  $gutter: true
) {
  @for $i from 1 through $amount {

    @if $i == $amount {
      &.col-#{$i} {
        width: percentage(1);
      }
    }
    @else {
      $denom: ($amount / $i);

      @if $gutter {
        &.col-#{$i} {
          width: 100%;

          @include make-scale($breakpoint-medium) {
            width: percentage($i / $amount) - ((($denom - 1) * $column-spacing-percentage) / $denom);
          }
        }
      }
      @else {
        &.col-#{$i} {
          width: 100%;

          @include make-scale($breakpoint-medium) {
            width: percentage($i / $amount);
          }
        }
      }
    }

  }
}

@mixin make-divider(
  $title,
  $color,
  $margin
) {
  .divider-#{$title} {
    background: $color;
    margin: $margin;
  }
}