The best way to accomplish this is container queries, which are just starting to show up in browsers. Essentially, you define breakouts based on the dimensions of individual elements, not the full browser window. https://css-tricks.com/say-hello-to-css-container-queries/
Sounds like they just dropped in Chrome Canary, so this is very, very early. That typically means it'll take years for it to be supported in all browsers or 99% of browser versions in use. Is there a polyfill solution for this in the meantime?
Container queries have been suggested for a while now, it is not a new idea. But it has gained a lot of momentum recently, for example [1]. So maybe it will not be years until all modern browsers might support it. Until then, you might want to try [2] (not a polyfill, but a workaround with JavaScript).
