Is it bad to have multiple H1 tags, even if one of them only shows up on mobile?

Hi! Here's the situation: I have two H1 tags that have exactly the same text – the only difference is that one of them has additional line breaks using <br>. That one only shows up on mobile. I did this because I wanted the text to look a certain way on mobile that's different from how it looks on desktop and tablet.

My question is: Is this a bad practice? Will Google penalize my site for having two H1 tags? Should I change my mobile-only heading to an H2 instead?

Thanks!