$breakpoint-width: 600px !default;

@mixin on-small-screen() {
  @media (max-width: ($breakpoint-width - 1px)) {
    @content;
  }
}

@mixin on-mobile-input() {
  @media (max-width: ($breakpoint-width - 1px)), (hover: none) and (pointer: coarse) {
    @content;
  }
}