$mobile: 320px;
$mobileMax: 639px; // use with max-width
$tablet: 640px;
$tabletMax: 1023px; // use with max-width
$desktopSmall: 1024px;
$desktopSmallMax: 1279px; // use with max-width
$desktopMedium: 1280px;
$desktopMediumMax: 1439px; // use with max-width
$desktopLarge: 1440px;
$desktopLargeMax: 1919px; // use with max-width
$desktopExtraLarge: 1920px;

// only visible on desktop
.ids-desktop,
.ids-desktop-only {
  @media (max-width: ($tabletMax)) {
    display: none !important;
  }
}

.ids-mobile,
.ids-mobile-only {
  @media (min-width: ($desktopSmall)) {
    display: none !important;
  }
}

.ids-tablet-only {
  @media (max-width: $mobileMax), (min-width: $desktopSmall) {
    display: none !important;
  }
}

.ids-tablet-hide {
  @media (min-width: $tablet) and (max-width: $tabletMax) {
    display: none !important;
  }
}

.ids-desktop-small-only {
  @media (max-width: $tabletMax), (min-width: $desktopMedium) {
    display: none !important;
  }
}

.ids-desktop-small-hide {
  @media (min-width: $desktopSmall) and (max-width: $desktopSmallMax) {
    display: none !important;
  }
}

.ids-desktop-medium-only {
  @media (max-width: $desktopSmallMax), (min-width: $desktopLarge) {
    display: none !important;
  }
}

.ids-desktop-medium-hide {
  @media (min-width: $desktopMedium) and (max-width: $desktopMediumMax) {
    display: none !important;
  }
}

.ids-desktop-medium-up {
  @media (max-width: $desktopSmallMax) {
    display: none !important;
  }
}

.ids-desktop-large-up {
  @media (max-width: $desktopMediumMax) {
    display: none !important;
  }
}

.ids-desktop-extra-large-up {
  @media (max-width: $desktopLargeMax) {
    display: none !important;
  }
}