@import "../variables/variables";

@mixin desktop-1600max {
  @media screen and (max-width: 1600px) {
    @content;
  }
}

@mixin desktop-1440max {
  @media screen and (max-width: 1440px) {
    @content
  }
}

@mixin desktop-1280max {
  @media screen and (max-width: 1280px) {
    @content;
  }
}

@mixin desktop-768max {
  @media screen and (max-width: 768px) {
    @content;
  }
}

@mixin screen-lg {
  @media (min-width: map_get($breakpoints, "lg")){
    @content
  }
}

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

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

@mixin screen($size) {
  @media (min-width: map_get($breakpoints, $size)) {
    @content
  }
}

@mixin screen-lg-below {
  @media (max-width: calc(#{ map-get($breakpoints, "lg") } - 1px)) {
    @content
  }
}

@mixin screen-md-below {
  @media (max-width: calc(#{ map-get($breakpoints, "md") } - 1px)) {
    @content
  }
}

@mixin screen-sm-below {
  @media (max-width: calc(#{ map-get($breakpoints, "sm") } - 1px)) {
    @content
  }
}
