linear-gradient над Gatsby-Background-Image

У меня есть изображение, на которое я ссылаюсь с запросом Graphql в своем коде. На этом изображении я хочу иметь линейный градиент, который находится в моем модуле css. Как я могу сделать это без использования css, написанного в моем файле javascript?

Наличие линейного градиента, записанного в файле js, действительно работает, но он помещает мой стиль CSS туда, где мне это не нужно. Как я могу сослаться на свой стиль градиента в модуле css и заставить его работать с Gatsby-Background-Image?

Использование класса heroGradient в файле css-модуля перезаписывает все изображение. Как сохранить изображение в стеке, не перезаписывая его, применяя только градиент сверху?

const {image} = useStaticQuery(graphql`
    query {
      image: file(relativePath: { eq: "filename.jpg" }) {
        childImageSharp {
          fluid(quality: 100) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
`)
// This works
// const imageDataStack = [image.childImageSharp.fluid, `linear-gradient(270deg, #ffffff27 30%,  #e8d4b450 100%)`].reverse()

// This doesn't work
const imageDataStack = [image.childImageSharp.fluid, heroStyles.heroGradient].reverse()

  return (
    <BackgroundImage 
      Tag="section"
      className={heroStyles.heroContent}
      fluid={imageDataStack}
      >
      <h1 className={heroStyles.heroText}>
        {site.siteMetadata.description}
      </h1>
    </BackgroundImage>

.hero-gradient {
    background: linear-gradient(270deg, #ffffff27 30%,  #e8d4b450 100%);