$breakpoint--small: 320px;
$breakpoint--medium: 768px;
$breakpoint--large: 1024px;
$breakpoint--x-large: 1400px;

@mixin breakpoint($point) {
  @if $point == small_up {
    @media screen and (min-width: $breakpoint--small)  { @content ; }
  }
  @else if $point == small_down {
    @media screen and (max-width: ($breakpoint--small - 1))  { @content ; }
  }
  @else if $point == between_small_and_medium {
    @media screen and (min-width: $breakpoint--small) and (max-width: ($breakpoint--medium - 1))  { @content ; }
  }
  @else if $point == medium_up {
    @media screen and (min-width: $breakpoint--medium)  { @content ; }
  }
  @else if $point == medium_down {
    @media screen and (max-width: ($breakpoint--medium - 1))  { @content ; }
  }
  @else if $point == large_up {
   @media screen and (min-width: $breakpoint--large)  { @content ; }
  }
  @else if $point == xlarge_up {
    @media screen and (min-width: $breakpoint--x-large)  { @content ; }
  }
  @else {
    @error "There's an invalid breakpoint not declared in the breakpoints mixin.";
  }
}
