.hide {
  display: none !important;
}
.show {
  display: inherit;
}

.hidden {
  visibility: hidden;
}

.sm-show,
.md-show,
.lg-show,
.xl-show {
  display: none;
}

/* extra-small */

@media screen and (--breakpoint-min-xs) {
  .xs-hide {
    display: none !important;
  }
}
@media screen and (--breakpoint-min-xs) {
  .xs-show {
    display: inherit !important;
  }
}

/* small */

@media screen and (--breakpoint-min-sm) {
  .sm-hide {
    display: none !important;
  }
}
@media screen and (--breakpoint-min-sm) {
  .sm-show {
    display: inherit !important;
  }
}

/* medium */

@media screen and (--breakpoint-min-md) {
  .md-hide {
    display: none !important;
  }
}
@media screen and (--breakpoint-min-md) {
  .md-show {
    display: inherit !important;
  }
}
/* large */

@media screen and (--breakpoint-min-lg) {
  .lg-hide {
    display: none !important;
  }
}
@media screen and (--breakpoint-min-lg) {
  .lg-show {
    display: inherit !important;
  }
}

/* xl */
@media screen and (--breakpoint-min-xl) h {
  .xl-hide {
    display: none !important;
  }
}
@media screen and (--breakpoint-min-xl) {
  .xl-show {
    display: inherit !important;
  }
}