@use "sass:map";
@use "sass:math";

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1366px,
) !default;

@mixin respond-above($bp) {
  @if map.has-key($breakpoints, $bp) {
    @media (min-width: map.get($breakpoints, $bp)) {
      @content;
    }
  }
}

@mixin respond-below($bp) {
  @if map.has-key($breakpoints, $bp) {
    $max: map.get($breakpoints, $bp);
    @media (max-width: calc(#{$max} - 0.02px)) {
      @content;
    }
  }
}