$breakpoints: (
    sm: 640px,
    md: 768px,
    lg: 1024px,
    xl: 1280px,
    2xl: 1536px,
);

@mixin respond($breakpoint) {
    @if not map-has-key($breakpoints, $breakpoint) {
        @warn "'#{$breakpoint}' is not a valid breakpoint";
    }
    @each $bp, $size in $breakpoints {
        @media (min-width: $size) {
            @content;
        }
    }
}