@mixin breakpoint($point) {
  @if $point == desktop {
    @media screen and (min-width: 1024px) and (max-width: 1249px),
    only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape) {
      @content;
    }
  }
  @else if $point == tablet {
    @media screen and (min-width: 320px) and (max-width: 1023px)  {
      @content;
    }
  }
  // @else if $point == mobile {
    // @media screen and (min-width: 320px) and (max-width: 767px)  {
      // @content;
    // }
  // }
}

@mixin media-width($breakpoint, $width) {
  @include breakpoint($breakpoint) {
    width: $width;
  }
}

@mixin retina() {
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    @content
  }
}