@use 'sass:map';

$bps: (
    'mobile': 500px,
);

@mixin above($bp)
{
    @container bitran (min-width: #{map.get($bps, $bp)}) { @content; }
}

@mixin below($bp)
{
    @container bitran (max-width: #{map.get($bps, $bp) - 1}) { @content; }
}

@mixin between($bp1, $bp2)
{
    @container bitran (min-width: #{map.get($bps, $bp1)}) and (max-width: #{map.get($bps, $bp2) - 1}) { @content; }
}