//----------
// General scss for the breakpoints
//----------
@mixin breakpoint($size:$breakpoint_tablet) {
  @media screen and (max-width: $size) {
    @content;
  }
}

@mixin phone {
  @media screen and (max-width: $breakpoint_phone) {
    @content;
  }
}

@mixin tablet {
  @media screen and (max-width: $breakpoint_tablet) {
    @content;
  }
}

@mixin medium {
  @media screen and (max-width: $breakpoint_medium) {
    @content;
  }
}

@mixin desktop {
  @media screen and (max-width: $breakpoint_desktop) {
    @content;
  }
}

@mixin min-breakpoint($size:$breakpoint_tablet) {
  @media screen and (min-width: $size + 1px) {
    @content;
  }
}

@mixin min-phone {
  @media screen and (min-width: $breakpoint_phone + 1px) {
    @content;
  }
}

@mixin min-tablet {
  @media screen and (min-width: $breakpoint_tablet + 1px) {
    @content;
  }
}

@mixin min-medium {
  @media screen and (min-width: $breakpoint_medium + 1px) {
    @content;
  }
}

@mixin min-desktop {
  @media screen and (min-width: $breakpoint_desktop + 1px) {
    @content;
  }
}
