$breakpoints: (
        "small": 567px,
        "medium": 568px,
        "large": 1200px,
);

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

@mixin md {
  @media (min-width: map-get($breakpoints, "medium")) and (max-width: calc(map-get($breakpoints, "large") - 1px)) {
    @content;
  }
}

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

@mixin customBreakpoint($defaultBreakpoint) {
  @media (min-width: $defaultBreakpoint) {
    @content;
  }
}