$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;

// Try not to use this, as it breaks "mobile first" principles. Applies only to mobile devices.
@mixin for-phone-only {
  @media (max-width: $breakpoint-tablet - 1) {
    @content;
  }
}

// Style applies to devices with width tablet or above.
@mixin for-tablet-up {
  @media (min-width: $breakpoint-tablet) {
    @content;
  }
}

// Style applies to devices with width desktop or above.
@mixin for-desktop-up {
  @media (min-width: $breakpoint-desktop) {
    @content;
  }
}