.na-hidden {
  display: none;
}

.na-invisible {
  visibility: hidden;
}

.na-visible\@xs,
.na-visible\@sm,
.na-visible\@md,
.na-visible\@lg,
.na-visible\@xl,
.na-visible\@2xl,
.na-visible\@3xl {
  display: none;
}

@media (min-width: 480px) {
  .na-hidden\@xs {
    display: none;
  }
  .na-visible\@xs {
    display: revert;
  }
}

@media (min-width: 640px) {
  .na-hidden\@sm {
    display: none;
  }
  .na-visible\@sm {
    display: revert;
  }
}

@media (min-width: 768px) {
  .na-hidden\@md {
    display: none;
  }
  .na-visible\@md {
    display: revert;
  }
}

@media (min-width: 1024px) {
  .na-hidden\@lg {
    display: none;
  }
  .na-visible\@lg {
    display: revert;
  }
}

@media (min-width: 1280px) {
  .na-hidden\@xl {
    display: none;
  }
  .na-visible\@xl {
    display: revert;
  }
}

@media (min-width: 1536px) {
  .na-hidden\@2xl {
    display: none;
  }
  .na-visible\@2xl {
    display: revert;
  }
}

@media (min-width: 1920px) {
  .na-hidden\@3xl {
    display: none;
  }
  .na-visible\@3xl {
    display: revert;
  }
}

.na-visible-toggle .na-hidden-hover {
  display: none;
}

.na-visible-toggle:hover .na-hidden-hover,
.na-visible-toggle:focus-within .na-hidden-hover {
  display: revert;
}

.na-visible-toggle .na-invisible-hover {
  visibility: hidden;
}

.na-visible-toggle:hover .na-invisible-hover,
.na-visible-toggle:focus-within .na-invisible-hover {
  visibility: visible;
}

@media (pointer: coarse) {
  .na-hidden-touch {
    display: none;
  }
}

@media (pointer: fine) {
  .na-hidden-notouch {
    display: none;
  }
}