html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

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

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

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

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

  .app,
  .shell,
  .wrap,
  .page,
  .container,
  main,
  section,
  article,
  form,
  .card,
  .panel {
    max-width: 100%;
    min-width: 0;
  }

  input,
  select,
  textarea {
    width: 100%;
    font-size: 16px;
  }

  button,
  .btn,
  .button,
  [role="button"] {
    min-height: 44px;
  }

  .grid,
  .hero,
  .join-grid,
  .dashboard,
  .side-grid,
  .cards,
  .actions,
  .form-grid,
  .form-grid-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .topbar,
  .header,
  .footer,
  .actions {
    max-width: 100%;
  }

  p,
  li,
  td,
  th,
  a,
  strong,
  span {
    overflow-wrap: anywhere;
  }
}