Stats Preview Card Using Component using SASS initialized with Nodejs

Do you guys have other alternatives for accurately getting the image to have the exact same color filter as the design? Although I'm already plenty content with the output from my solution, but it's not quite the same as the design and it won't hurt to try learning from other methods.

For context, I used a ::before pseudo-element and blended the image with the mix-blend-mode property. This yielded better results in my opinion, but it came at the cost of trial-and-error -- trying out every mix-blend-mode value available to find the best results. 😅

&::before {
    grid-area: img;
    justify-self: normal;
    content: '';
    background-color: var(--accent-color);
    mix-blend-mode: multiply;
  }
  
  > img {
    grid-area: img;
    height: rem(240px);
    object-fit: cover;
  }