flexbox, var, max-width, min-width, opacity

👾Hello Juan, congratulations for your new solution!

For the container you can improve in two sides, the width should be only one value, this case max-width is a better fit because its responsive, note that width is fixed. The correct value for this container is max-width: 1115px and there's no need to use height the container height grows with its inner content. See the changes below:

.card {
    /* width: 100%; */
    max-width: 1115PX;
    /* min-width: 320px; */
    background-color: var(--card-background);
    display: flex;
    /* height: 250px; */
    border-radius: 8px 8px 8px 8px;
}

To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode using the multiply one.The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

Here’s how you can add this to your img selector: img { mix-blend-mode: multiply; opacity: 84%;}

✌️ I hope this helps you and happy coding!

Thanks for your comments. I will try your improves, it is a great help for me. I didn't know mix-blend-mode property so I'm going to investigate more about it. Thanks for your words!