// ===========================================
// BREAKPOINT VIEWS
// ===========================================
=mobile
  @media screen and (min-width: $bp-none)
    @content

=mobile-only
  @media screen and (min-width: $bp-none) and (max-width: ($bp-medium - 1px))
    @content

=mobile-down
  @media screen and (max-width: ($bp-medium - 1px))
    @content

=tablet
  @media screen and (min-width: $bp-medium)
    @content

=tablet-only
  @media screen and (min-width: $bp-medium) and (max-width: ($bp-xlarge - 1px))
    @content

=tablet-down
  @media screen and (max-width: ($bp-xlarge - 1px))
    @content

=desktop
  @media screen and (min-width: $bp-xlarge)
    @content

=desktop-only
  @media screen and (min-width: $bp-xlarge) and (max-width: ($bp-widescreen - 1px))
    @content

=desktop-down
  @media screen and (max-width: ($bp-widescreen - 1px))
    @content

=widescreen
  @media screen and (min-width: $bp-widescreen)
    @content