@import '../jnt-variables';

@mixin for-mobile() {
  @media screen and (max-width: $jnt-tablet-breakpoint) {
    @content;
  }
}
@mixin for-tablet() {
  @media screen and (min-width: calc(#{$jnt-tablet-breakpoint} + 1px)) and (max-width: $jnt-desktop-breakpoint) {
    @content;
  }
}
@mixin for-desktop() {
  @media screen and (min-width: calc(#{$jnt-desktop-breakpoint} + 1px)) and (max-width: $jnt-wide-breakpoint) {
    @content;
  }
}
@mixin for-wide() {
  @media screen and (min-width: calc(#{$jnt-wide-breakpoint} + 1px)) {
    @content;
  }
}
@mixin min-for-tablet() {
  @media screen and (min-width: calc(#{$jnt-tablet-breakpoint} + 1px)) {
    @content;
  }
}
@mixin min-for-desktop() {
  @media screen and (min-width: calc(#{$jnt-desktop-breakpoint} + 1px)) {
    @content;
  }
}
@mixin max-for-tablet() {
  @media screen and (max-width: $jnt-desktop-breakpoint) {
    @content;
  }
}
@mixin max-for-desktop() {
  @media screen and (max-width: $jnt-wide-breakpoint) {
    @content;
  }
}
@if $jnt-debug {
  @debug 'responsive compiled';
}