@use "sass:map";
@use "../theme.scss" as *;
@use "../breakpoints.scss";

.hide {
  display: none !important;
}

@media (max-width: map.get($breakpoints, "sm") - 1) {
  .hide-xs {
    display: none !important;
  }
}

@media (min-width: map.get($breakpoints, "sm")) and (max-width: map.get($breakpoints, "md") - 1) {
  .hide-sm {
    display: none !important;
  }
}

@media (max-width: map.get($breakpoints, "md") - 1) {
  .hide-to-sm {
    display: none !important;
  }
}

@media (min-width: map.get($breakpoints, "sm")) {
  .hide-from-sm {
    display: none !important;
  }
}


@media (min-width: map.get($breakpoints, "md")) and (max-width: map.get($breakpoints, "lg") - 1) {
  .hide-md {
    display: none !important;
  }
}

@media (max-width: map.get($breakpoints, "lg") - 1) {
  .hide-to-md {
    display: none !important;
  }
}

@media (min-width: map.get($breakpoints, "md")) {
  .hide-from-md {
    display: none !important;
  }
}


@media (min-width: map.get($breakpoints, "lg")) and (max-width: map.get($breakpoints, "xl") - 1) {
  .hide-lg {
    display: none !important;
  }
}

@media (max-width: map.get($breakpoints, "xl") - 1) {
  .hide-to-lg {
    display: none !important;
  }
}

@media (min-width: map.get($breakpoints, "lg")) {
  .hide-from-lg {
    display: none !important;
  }
}

@media (min-width: map.get($breakpoints, "xl")) {
  .hide-xl {
    display: none !important;
  }
}