$b-grid__media-xsm: 450px;
$b-grid__media-xsm-npx: 450;
$b-grid__container-xsm: 450px;

//SM phones
$b-grid__media-sm: 768px;
$b-grid__media-sm-npx: 768;
$b-grid__container-sm: 750px;

//MD tablets
$b-grid__media-md: 992px;
$b-grid__media-md-npx: 992;
$b-grid__container-md: 970px;

//LG desktop
$b-grid__media-lg: 1200px;
$b-grid__container-lg: 1150px;

//XLG desktop
$b-grid__media-xlg: 1680px;
$b-grid__container-xlg: 1630px;


@mixin media($min: '',$max: '') {
    
    $min-screen: '';
    @if $min == xsm {$min-screen:$b-grid__media-xsm;}
    @if $min == sm  {$min-screen:$b-grid__media-sm;}
    @if $min == md  {$min-screen:$b-grid__media-md;}
    @if $min == lg  {$min-screen:$b-grid__media-lg;}
    @if $min == xlg  {$min-screen:$b-grid__media-xlg;}
    @if $min == ''  {$min-screen:'';}
  
    $max-screen: '';
    @if $max == xsm {$max-screen:$b-grid__media-xsm;}
    @if $max == sm  {$max-screen:$b-grid__media-sm;}
    @if $max == md  {$max-screen:$b-grid__media-md;}
    @if $max == lg  {$max-screen:$b-grid__media-lg;}
    @if $max == xlg  {$max-screen:$b-grid__media-xlg;}

    @if $min ==''{
        @media (max-width: $max-screen){
            @content;
        }
    } 
    @else if $max ==''{
        @media (min-width: $min-screen){
            @content;
        }
    } @else{
        @media (min-width: $min-screen) and (max-width: $max-screen) {
            @content;
        }
    } 
}