html{font-size:18px}
@media (max-width:640px){html{font-size:17px}}
/* Mobile rules for the UI kit. Screens are built with inline styles, so these
   structural overrides use !important. Breakpoints follow the source: 920 / 560. */
html, body { overflow-x: clip; }
html { background: var(--surface-chrome); }
body { background: var(--surface-page); }
#root { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#root > main { flex: 1 0 auto; }
#root > footer { margin-bottom: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
@media (max-width: 920px) {
  .pd-media { position: static !important; }
  .wrap [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .wrap[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .wrap[style*="grid-template-columns"] > div:last-child { order: -1; }
  .wrap [style*="grid-template-columns"] > [style*="grid-row"] { grid-row: auto !important; }
  main > section { padding-top: 56px !important; padding-bottom: 56px !important; }
  main > article { padding-top: 40px !important; }
  .wrap > div > [style*="min-height: 520px"], .wrap[style*="min-height"] { min-height: 0 !important; }
  .wrap [style*="max-width: 720px"] { max-width: 100% !important; }
  .wrap img[style*="aspect-ratio: 4 / 5"] { max-width: 180px; }
  [style*="font-size: 26rem"] { display: none !important; }
  [style*="writing-mode: vertical-rl"] { display: none !important; }

  .wrap [style*="padding: 44px 40px"], .wrap [style*="padding: 36px 40px"] { padding: 28px 24px !important; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px !important; }
  main > section { padding-top: 44px !important; padding-bottom: 44px !important; }
  main .wrap [style*="flex-direction: column"] > a, main .wrap [style*="display: flex"] > button { width: 100% !important; }
  table th { width: auto !important; }
}