// Screens less than 1024 wide
// More will be added over time to support mobile devices better
// These are designed to trickle down. So tablet styles will apply to tablet and smaller, etc
// To overwrite, put the smallest devices at the bottom

.smallPhone(@rules) {
  @media only screen and (max-width: 400px) {
    @rules();
  }
}

.medPhone(@rules) {
  @media only screen and /*(min-width: 351px) and */ (max-width: 550px) {
    @rules();
  }
}

.largePhone(@rules) {
  @media only screen and /*(min-width: 551px) and */ (max-width: 640px) {
    @rules();
  }
}

.smallTablet(@rules) {
  @media only screen and /*(min-width: 641px) and */(max-width: 1000px) {
    @rules();
  }
}

.tablet(@rules) {
  @media only screen and /*(min-width: 601px) and */(max-width: 1024px) {
    @rules();
  }
}

.smallScreen(@rules) {
  @media only screen and /*(min-width: 601px) and */(max-width: 1400px) {
    @rules();
  }
}