Change banner text size, it's tiny on mobile

Site URL: https://www.kvinnohistoriska.se/aktuellt

Hi all!
I'm stuck at a problem when working on one of my sites. The page banner text size is for some reason tiny in mobile view, and I can't seem to come up with, or find, code to help. The banner image (which is just a .png in the color I want as background) is also way too high, I would like the text to be much bigger but the banner much shorter.

https://www.kvinnohistoriska.se/aktuellt

I've tried this code below but it doesn't work, even if it works for changing color, font etc. Just not the size.

@media screen and (max-width: 960px) {

  .desc-wrapper p>strong, .desc-wrapper p>em>strong {
    font-size: 37px;
} }

I would really appreciate some help ❤️

By the way, I use the Bedford template if it makes a difference.

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:640px) {
  .desc-wrapper p {
    font-size: 50px !important;
}
  }
</style>

Thanks tuanphan, I added code for the bold text, removed <style> and added it to Custom CSS to get it site-wide and now it works perfectly. 

  @media screen and (max-width:640px) {
  .desc-wrapper p, p>strong, .desc-wrapper p>em>strong {
    font-size: 50px !important;
}
  }