The size breakpoints in SLDS are based on the screen size which works great for LWCs that occupy the full width of the screen e.g.:
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-3"> ... </div>
But I'd like my LWC to layout correctly when it is in (flexi-) pages that present it in 2 or 3 or 4 columns side by side where the relevant width is only a part of the screen.
Any suggestions for how to handle this?