Responsive media queries

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1600px) { @content; }
}

// Example usage
.element {
  padding: 1rem;

  @include for-desktop-up {
    padding: 1.5rem;
  }
}