/// Responsive breakpoint manager
/// @access public
/// @param {String} $breakpoint - Breakpoint
/// @requires $breakpoints
@mixin respond-to($breakpoint) {
  $raw-query: map-get($breakpoints, $breakpoint);
  @if $raw-query {
    $query: if(type-of($raw-query) == 'string', unquote($raw-query), inspect($raw-query));
    @media #{$query} {
      @content;
    }
  } @else {
    @error'No value found for `#{$breakpoint}`. ' + 'Please make sure it is defined in `$breakpoints` map.';
  }
}

// Responsive Web Design
$breakpoints: (
  'xs': (min-width: 544px),
  'sm': (min-width: 768px),
  'md': (min-width: 992px),
  'lg': (min-width: 1200px)
);