/* Media query mixin for writing Mobile First
 * ========================================== */

@mixin mq($min: null, $max: null) {
  $query: "all" !default;

  // set both min and max
  @if ($min != null and $max != null) {
    $query: "(min-width: #{$min}px) and (max-width: #{$max - 1}px)";
  }
    // set just min
  @else if ($min != null and $max == null) {
    $query: "(min-width: #{$min}px)";
  }
    // set just max
  @else if ($min == null and $max != null) {
    $query: "(max-width: #{$max - 1}px)";
  }

  @media screen and #{$query} {
    @content;
  }
}