That’s technically valid CSS. 
The --header-footer-gap is a CSS variable defined on the Hero Attribute tile. CSS Variables are pretty neat in that they allow you to define a value once and then re-use it in several places, even cascading down into child elements if needed.
The beauty of this is we can use different CSS selectors to change the value based on what’s rendered. So in this case, it changes between rem and em units based on if you are using a scalable dashboard or not – that way it applies the appropriate spacing to the top and bottom to allow for the scrolling and alignment mentioned in my previous reply.
It’s certainly a reasonable approach to have your custom CSS change that value for your targeted needs! So rather than targeting that specific [data-v-XXXXX] identifier, you could try targeting it more generically.
For example, this approach uses the named style approach, but you could of course adapt it to a different selector as you see fit:
.--theme-style-hero-demo .main-content {
--header-footer-gap: 0!important;
}
As usual, any CSS snippets provided are not officially supported and may require tweaks with future updates of the app
Also keep in mind the reasoning for this --header-footer-gap value on the Hero Attribute tile per the response above as if you apply it to something that needs to scroll, it will likely cause issues.