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

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

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

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

.flex > *,
.grid > * {
  min-width: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
button,
label,
span {
  overflow-wrap: break-word;
}

table {
  max-width: 100%;
}

@media (max-width: 639px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  p,
  li,
  label {
    text-wrap: pretty;
  }
}