Setting a transparent background on bulma hero?

Question

How to set the background colour of a hero element in Bulma to transparent?

Version 1 of Bulma

1. Set the $primary variable?

This doesn't work.

$primary: transparent;
@use "../../../../libraries/node_modules/bulma/sass" with (
   $primary:v.$primary,

2. Set the specific hero values. This does not work, there is an error indicating that these variables can't be overridden as they don't have an exclamation mark.

   @use '../../../../sites/variables' as v;
   @use "../../../../libraries/node_modules/bulma/sass" with (
     $bulma-hero-s: v.$bulma-hero-s,
   

3. Override the css variables?

This works, but seems untidy. Certainly needs bulma internal details to work

.hero.is-primary {
  --bulma-hero-background-l: transparent;
}

4. Use CSS?

Also seems untidy

body  .hero.is-primary {
  background-color: transparent;
}

What is the cleanest way? The way that preserves the internal structure of Bulma?