3 Column Preview Card styling buttons with `mix-blend-mode` ?

Hi everybody,

You'll find details about the project on the github repo.

Here are some of my questions :

• About my use of mix-blend-mode :

  • The use of mix-blend-mode here is some sort of a hack because it does not render the button background as expected : --very-ligh-gray-color (initial button background-color) is not exactly white hence the sreen value for mix-blend-mode blend it with the background color of the parent that is orange or blue, resulting in a slightly colored button background color. Of course in this case this not visible, but say we change the button background color to some other shade of gray, it could became problematic.
  • So first question : is there a way to overcome this using mix-blend-mode ? It would be great to be able to nest a paragraph inside the button (<a href="#" class="btn hello card-item__btn"><p>Learn More</p></a>) and apply mix-blend-mode on that paragraph, but blending with second parent in the hierarchy.
  • Second question : any other way to match the color of the button with the background-color of the parent automatically, without having to hard-code the color for each button ?
    • (I am thinking of using scss or sass, but not willing to dive in those at this stage.)

• Every other feedback are much appreciated ! Especially about my use of HTML semantic elements. Should I use header, section, ..., what are best practices to divide such card-items into semantic parts ? What about the h1, are h2 better in this case ?

Thank you very much !