Having an issue to display background image with linear-gradient with css modules in Next 14

This css doesn't display background image

.header {
  height: 85vh;
  background-image: linear-gradient(
      to right bottom,
      rgba(var(--color-primary-light), 0.8),
      rgba(var(--color-primary-dark), 0.8)
    ),
    url('/img/hero-small.jpg');
  background-size: cover;
  background-position: top;
  position: relative;
}

The following code works without linear-gradient:

.header {
  height: 85vh;
  background-image: url('/img/hero-small.jpg');
  background-size: cover;
  background-position: top;
  position: relative;
}

import styles from '@/app/_components/header.module.css';


const Header = ({children}) => {
  return <header className={styles.header}>{children}</header>;
};

export default Header;

Actually I figured out the real reason is my variables were holding hex values while linear-gradient wants rgb. Because it is a CSS file it doesn't auto convert hex to rgb like it would do in SASS, for example.