// Actual media queries
$mediaqueries: (
    xs-only:             "(max-width: #{$screen-xs-max})",
    sm:                  "(min-width: #{$screen-sm-min})",
    sm-only:             "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})",
    md:                  "(min-width: #{$screen-md-min})",
    md-only:             "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})",
    lg:                  "(min-width: #{$screen-lg-min})",
    smaller-md:          "(max-width: #{$screen-sm-max})",
    smaller-lg:          "(max-width: #{$screen-md-max})",
);

// Central Media Query Mixin
@mixin respond-to($query) {
    @if map-has-key($mediaqueries, $query) {
        @media #{map-get($mediaqueries, $query)} {
            @content;
        }
    }
    @else {
        @warn "Unfortunately, no value could be retrieved from `#{$query}`. "
            + "Please make sure it is defined in `$mediaqueries` map.";
    }
}