@mixin breakpoint($breakpoint) {
  // Retrieves the value from the key
  $value: map-get($breakpoints, $breakpoint);

  // If the key exists in the map
  @if $value != null {
    // Prints a media query based on the value
    @media only screen and (min-width: $value) {
      @content;
    }

    /* stylelint-disable-next-line */
  } @else {
    // Prints a media query based on the value
    @media only screen and (min-width: $breakpoint) {
      @content;
    }
  }
}

@mixin breakpoint-max($breakpoint) {
  // Retrieves the value from the key
  $value: map-get($breakpoints, $breakpoint);

  // If the key exists in the map
  @if $value != null {
    // Prints a media query based on the value
    @media only screen and (max-width: $value) {
      @content;
    }

    /* stylelint-disable-next-line */
  } @else {
    // Prints a media query based on the value
    @media only screen and (max-width: $breakpoint) {
      @content;
    }
  }
}