mixins for bearkpoints

@mixin respond($breakpoint) {
  @if $breakpoint==mobile {
    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
      @content;
    }
  }
  @if $breakpoint==tab {
    @media (min-device-width: 668px) and (max-device-width: 1024px) {
      @content;
    }
  }
  @if $breakpoint==laptop {
    @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
      @content;
    }
  }
  @if $breakpoint==laptop-r {
    @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
      @content;
    }
  }
  @if $breakpoint==big {
    @media only screen and (min-width: 1800) {
      @content;
    }
  }
}