How to reduce the size of the Heading on Mobile Version?

[LSAccounting]

So I have been changing a few codes to display a video instead of a slide on my Home Page. 

The mobile view is showing the Heading way too big as shown below. I have worked out in the Inspect option that I need a scale of heading 2rm for the mobile version but as soon as I add this code to the code editor - using the code below the Heading of the Desktop version changes too.

.h0 {

font-size: calc(var(--font-heading-scale) * 2rem);

}

Is there a way of changing the heading size for the mobile version only? 

I am also trying to make the boxes a bit smaller but haven't found the way to do that as of yet. 

This is where I am at at the moment. 

https://lsaccountingfirm-umbrella.myshopify.com/

[DelightCart]

@LSAccounting Go to assets/section-image-banner.css and paste below css at bottom of file.

@media screen and (max-width: 749px)
.banner__heading.h0
{
font-size 22px !important;
}

[LSAccounting]

@DelightCart 

Unfortunately, that did not make a difference.