// ---------------------------------------------------------
// MEDIA QUERIES
// ---------------------------------------------------------

@mixin mq($condition) {
  @media #{$condition} {
    @content;
  }
}

@mixin from($breakpoint) {
  @media screen and (min-width: $breakpoint){
    @content;
  }
}

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

@mixin between($start, $end){
  @media screen and (min-width: $start) and (max-width: $end - 1px) {
    @content;
  }
}

@mixin large($breakpoint){
  @media (min-width: $breakpoint){
    @content
  }
}

@mixin portrait($start, $end){
  @media (min-width: $start) and (max-width: $end) {
    @content
  }
}

@mixin landscape($breakpoint){
  @media (max-width: $breakpoint - 1px){
    @content
  }
}