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

  #root main,
  #root section,
  #root header,
  #root footer {
    max-width: 100vw;
  }

  #root h1,
  #root h2,
  #root h3,
  #root p {
    overflow-wrap: anywhere;
  }

  #root .max-w-7xl,
  #root .max-w-6xl,
  #root .max-w-5xl {
    max-width: 100%;
  }

  #root .ui-hero .ui-container,
  #root .ui-hero .ui-container > * {
    min-width: 0;
  }

  #root .ui-hero p,
  #root .ui-hero h1 {
    max-width: min(100%, 358px) !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  #root .ui-hero .grid {
    width: 100%;
  }
}

#root .ui-hero p {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}