// There are breakpoints used by hyperbola
$w1366: 1366px;
$w1024: 1024px;
$w768: 768px;
$w523: 523px;
$w414: 414px;

@mixin lg {
  @media screen and (max-width: $w1366 - 1px) {
    @content;
  }
}

@mixin md {
  @media screen and (max-width: $w1024 - 1px) {
    @content;
  }
}

@mixin sm {
  @media screen and (max-width: $w768 - 1px) {
    @content;
  }
}

// WTF is this
@mixin ss {
  @media screen and (max-width: $w523 - 1px) {
    @content;
  }
}

@mixin xs {
  @media screen and (max-width: $w414 - 1px) {
    @content;
  }
}

.desktop-only {
  @media screen and (max-width: $w1024 - 1px) {
    display: none;
  }
}

.mobile-only {
  @media screen and (min-width: $w1024) {
    display: none;
  }
}
