// Viewport screen
$pad: 1024px;
$phone: 768px;

@mixin responsive($viewport) {
  @if ($viewport == $pad) {
    @media all and(max-width: $pad) {
      @content;
    }
  } @else if ($viewport == $phone) {
    @media all and(max-width: $phone) {
      @content;
    }
  } @else {
    @media all and($viewport) {
      @content;
    }
  }
}

@mixin pad() {
  @media all and(max-width: $pad) {
    @content;
  }
}

@mixin phone() {
  @media all and(max-width: $phone) {
    @content;
  }
}

@mixin maxWidth($viewport) {
  @media all and(max-width: $viewport) {
    @content;
  }
}

@mixin minWidth($viewport) {
  @media all and(min-width: $viewport) {
    @content;
  }
}

@mixin maxHeight($viewport) {
  @media all and(max-height: $viewport) {
    @content;
  }
}

@mixin minHeight($viewport) {
  @media all and(min-height: $viewport) {
    @content;
  }
}