[joy-ui][Card] Make orientation Responsive

Summary

I ended up in a situation where doing this:

<Card orientation={{xs: "vertical", md: "horizontal"}}>
	<NarrowContent/>
	<Divider />
	<WideContent/>
</Card>

would achieve result I want, that's about it.

Whilst writing this I thought that I would do it like I used to with useMediaQuery but turns out it's not in joy - https://github.com/mui/material-ui/issues/35037, so I guess I'll copy-paste content and display-hide/block it for now.

update: tried to extract content into it's own <MyCardContent/>:

<Card orientation="horizontal" sx={{ display: { xs: "none", md: "flex" } }}>
	<MyCardContent />
</Card>
<Card orientation="vertical" sx={{ display: { xs: "flex", md: "none" } }}>
	<MyCardContent />
</Card>

and that kinda failed because <Divider/> stopped behaving because it's no longer a direct child of Card, I'm kind of at a loss what to do.

Examples

No response

Motivation

No response

Search keywords: joy card orientation vertical horizontal responsive mobile desktop