@function point($point: 1) {
  @return $point / 2 + rem;
}

$grid-columns: 12 !default;
$grid-gutter: point(2);

// GRID SIZES
$size-device-large: 1280px !default;
$size-device-medium: 1080px !default;
$size-device-small: 640px !default;

@mixin device-size($size) {
  @if $size == large {
    @media only screen and (max-width: #{$size-device-large}) {
      @content;
    }
  } @else if $size == medium {
    @media only screen and (max-width: #{$size-device-medium}) {
      @content;
    }
  } @else if $size == small {
    @media only screen and (max-width: #{$size-device-small}) {
      @content;
    }
  }
}