$ca-breakpoint-mobile: 768px;
$ca-breakpoint-tablet: 1024px;

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

@mixin ca-media-tablet {
  @media (min-width: #{$ca-breakpoint-mobile}) and (max-width: #{$ca-breakpoint-tablet - 1px}) {
    @content;
  }
}

@mixin ca-media-tablet-and-under {
  @media (max-width: #{$ca-breakpoint-tablet - 1px}) {
    @content;
  }
}

@mixin ca-media-tablet-and-up {
  @media (min-width: #{$ca-breakpoint-mobile}) {
    @content;
  }
}

@mixin ca-media-desktop {
  @media (min-width: #{$ca-breakpoint-tablet}) {
    @content;
  }
}