Mobile-first layout

Resize below 360px: every panel above holds, the dark red panel overflows. Fix it by replacing its fixed width with width: 100% or min(500px, 100%).

The breaking panel: width 500px, no max — a horizontal scrollbar at phone widths.

Main column

Side column

Another panel: one column on phones, two on tablets, 2fr/1fr on desktop.