CSS - how to adjust font-size effectively across devices?

Let´s say that my default font sizes are:

h2 { font-size: 34px; }

@media (max-width: 768px) { h2 { font-size: 25px; }}

p { font-size: 18px; }

@media (max-width: 768px) { p { font-size: 0.9em; }}

I have a specific sentence that is h2 that I would like to make bigger (only that specific sentence, so I don´t want to alter the default h2)

So, I add a class, let´s say: <h2 class="important-subheading">

.important-subheading{ font-size: 2 em; }

Great, now it looks great on desktop (the final h2 would be 36px, so just 2px bigger than the default h2), but the problem is that it´s way too big for mobile. Basically, by adding that class, I made my h2 for mobile also 36px (way bigger than the original 25px)

Am I doing something wrong? Is there a better way of editing the h2 for desktop without affecting the mobile version that much?