@media (max-width: 768px){
  html, body { overflow-x: hidden; max-width: 100vw; }
  .card-container { width: 100% !important; max-width: 100% !important; padding: 14px !important; }
  [class*="w-[1400px]"], [class*="w-[1000px]"], [class*="w-[850px]"] { width: 100% !important; max-width: 100% !important; }
  [class*="max-w-[1400px]"], [class*="max-w-[1000px]"] { max-width: 100% !important; }
  [class*="px-8"] { padding-left: 12px !important; padding-right: 12px !important; }
  [class*="px-10"], [class*="p-10"] { padding-left: 14px !important; padding-right: 14px !important; }
  img, svg, canvas, video, iframe { max-width: 100% !important; height: auto; }
  /* horizontal rows inside the big cards wrap instead of overflowing (leave flex-col alone) */
  .card-container .flex:not(.flex-col) { flex-wrap: wrap; }
  /* wide tables scroll within their own box rather than pushing the page wide */
  table { max-width: 100%; }
}