@function rem($px)
    @return ($px / 16px) * 1rem

@function em($px, $base: 16px)
    @return ($px / $base) * 1em

$breakpoints: (xxs: 500, xs: 600, sm: 768, md: 850, lg: 970, xl: 1024, xxl: 1200)

@function bp-val($val)
    @return if(map-has-key($breakpoints, $val), map-get($breakpoints, $val), $val)

=bp($max-or-min, $width, $orient: false)
    $width: '(#{ $max-or-min }-width: #{ em(bp-val($width)) })'
    $orient: if($orient, 'and (orientation: #{ $orient })', '')
    @media #{ $width $orient }
        @content

=max($width, $orient: false)
    +bp(max, $width, $orient)
        @content

=min($width, $orient: false)
    +bp(min, bp-val($width) + 1, $orient)
        @content

=in($min, $max, $orient: false)
    $widths: '(min-width: #{ em(bp-val($min)) }) and (max-width: #{ em(bp-val($max)) })'
    $orient: if($orient, 'and (orientation: #{ $orient })', '')
    @media #{ $widths $orient }
        @content