$breakpoints: (
    "xs" : 0,
    "sm" : 30em,
    "md" : 45em,
    "lg" : 60em,
    "xl" : 75em,
);

@mixin xs {
    @media (min-width: map-get($breakpoints, "xs")){
        @content;
    }
};

@mixin sm {
    @media (min-width: map-get($breakpoints, "sm")){
        @content;
    }
};

@mixin md {
    @media (min-width: map-get($breakpoints, "md")){
        @content;
    }
};

@mixin lg {
    @media (min-width: map-get($breakpoints, "lg")){
        @content;
    }
};

@mixin xl {
    @media (min-width: map-get($breakpoints, "xl")){
        @content;
    }
};

@mixin breakpoint($bp: 0){
    @media (min-width: $bp){
        @content;
    }
}