@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-height: 100dvh;
  }

  aside {
    width: 100% !important;
  }

  aside > .p-6 {
    padding: 1rem !important;
  }

  #sidebar-nav {
    max-height: calc(100dvh - 73px);
    overflow-y: auto;
  }

  main {
    width: 100%;
    min-width: 0;
  }

  main > .p-6,
  main > .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  main > .p-6 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .max-w-7xl,
  .max-w-2xl,
  .max-w-xl,
  .max-w-lg,
  .max-w-md {
    max-width: 100% !important;
  }

  .glass-card {
    border-radius: 14px !important;
  }

  .glass-card.p-5,
  .glass-card.p-6,
  .glass-card.p-8 {
    padding: 1rem !important;
  }

  .grid.gap-6,
  .grid.gap-8,
  .grid.gap-12 {
    gap: 1rem !important;
  }

  header .px-6,
  footer .px-6,
  main .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  header .space-x-4 {
    gap: 0.625rem !important;
  }

  header .space-x-4 > :not(:last-child) {
    margin-right: 0 !important;
  }

  main h2.text-4xl,
  main h2.md\:text-5xl {
    font-size: 2.15rem !important;
    line-height: 1.05 !important;
  }

  main h2.text-2xl {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
  }

  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .overflow-x-auto table {
    min-width: 680px;
  }

  input,
  select,
  textarea,
  button,
  .inline-flex {
    max-width: 100%;
  }

  .flex-col.sm\:flex-row > .inline-flex {
    width: 100%;
  }
}