Can’t override CSS

I’m hosting a site with Bluehost and in the plugins folder there is a plugin named bluehost-wordpress-plugin. It is providing a bit of css that looks like this

.nfd-p-md:not([style*=padding]) {
padding: var(--nfd-cp-spacing-y-md) var(--nfd-cp-spacing-x-md)!important;
}

When viewing a particular page on mobile I want to provide an alternate padding value so I added my own class to the div and then add this to the site additional CSS

@media only screen and (max-device-width: 480px) {
.mobile-work { padding: 0px !important; }
}

When the page renders I can see the class is added, but my css is being overrode by the plugin css.

Any idea on how to accomplish the task at hand?

The page I need help with: [log in to see the link]