html,
body,
#root {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

@media (max-width: 520px) {
  body {
    min-width: 0 !important;
  }

  #root > div {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  nav {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  nav > * {
    min-width: 0 !important;
  }

  input,
  select,
  textarea,
  button,
  a {
    max-width: 100%;
  }

  .modal-overlay {
    padding: 10px !important;
  }

  .modal-box {
    max-width: calc(100vw - 20px) !important;
  }

  #root [style*="overflow-x: auto"],
  #root [style*="overflowX: auto"] {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  #root [style*="overflow-x: auto"] > button,
  #root [style*="overflowX: auto"] > button {
    flex: 1 1 44% !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}