//=============================================
//=            Media queries breakpoints      =
//=============================================

$breakpoint-sm: 768px !default;
$breakpoint-md: 992px !default;
$breakpoint-lg: 1200px !default;
$breakpoint-xl: 1600px !default;
$breakpoint-xxl: 2400px !default;

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

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

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

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

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

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

//=====  End of Media queries breakpoints  ======