$mobile-width: 768px;
$tablet-max: 1200px;
$desktop-max: 1704;


@mixin mobile {
  @media (max-width: #{$mobile-width}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$mobile-width + 1px}) {
    @content;
  }
}


@mixin desktop {
  @media (min-width: #{$tablet-max + 1px}) {
    @content;
  }
}

@mixin widescreen {
  @media (min-width: #{$desktop-max + 1px}){
    @content;
  }
}