@media (max-width: 991.98px) {
  .main-sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    position: fixed;
    z-index: 1030;
    height: 100vh;
  }

  body.sidebar-open .main-sidebar {
    transform: translateX(0);
  }

  .content-wrapper {
    margin-left: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .dashboard-hero,
  .staff-hero {
    padding: 1.5rem;
  }

  .auth-card,
  .auth-wide {
    width: calc(100% - 24px);
    margin: 12px;
  }

  .staff-layout {
    grid-template-columns: 1fr !important;
  }
}