$break-xs: 22.5rem; // 360px
$break-sm: 48rem; // 768px
$break-md: 64rem; // 1024px
$break-lg: 90rem; // 1440px
$pixel-in-rem: 0.0625rem; // 1px

@mixin mobile() {
  @media screen and (min-width: $break-xs) {
    @content;
  }
}

@mixin mobile-only() {
  @include mobile {
    @media screen and (max-width: $break-sm - $pixel-in-rem) {
      @content;
    }
  }
}

@mixin tablet() {
  @media screen and (min-width: $break-sm) {
    @content;
  }
}

@mixin tablet-only() {
  @include tablet {
    @media screen and (max-width: $break-md - $pixel-in-rem) {
      @content;
    }
  }
}

@mixin desktop() {
  @media screen and (min-width: $break-md) {
    @content;
  }
}

@mixin desktop-only() {
  @include desktop {
    @media screen and (max-width: $break-lg - $pixel-in-rem) {
      @content;
    }
  }
}

@mixin desktop-xl() {
  @media screen and (min-width: $break-lg) {
    @content;
  }
}