Rive files responsive changes

Hi all! I was so excited about the announcement of Rive embedding to Webflow directly, so I was trying something with it.
I made a slider animation, with 3 cards inside it with Rive. On mobile, I need to show just one at a time.

So the Rive file needs to change while going to smaller viewports, and in this case, I thought I needed 2 different Rive files, one to handle the desktop part and another for the mobile adaptation.

I then inserted 2 different Rive files in the page, one to be displayed as ‘none’ when on the desktop and vice-versa. But when browsing I can see that, if I resize the browser’s window, the Rive file doesn’t show up, even if it’s there. If you refresh the page it will show up, but it’s not very nice if someone changes its viewport.
Is there a way to make it work better?