stats-preview-card-component using Flexbox

Hi Daniel,

Great solution - nailed it!

• an alternative you could try is adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); this will help achieve the purple colour to match the design, rather than the overlay approach
• you also need to explore background-blend-mode. (multiply usually does the trick)

All the best!

The background was a right pain on this one! It might be overkill, but I managed to get really close with this:

.card-image {
    background: url(images/image-header-mobile.jpg) no-repeat center var(--soft-violet);
    background-size: cover;
    background-blend-mode: multiply;
    width: 327px;
    height: 240px;
    position: relative;
    opacity: 0.75;
}

.card::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 327px;
    height: 240px;
    background-color: hsl(277deg 64% 61%);
}

The image is a background-image with background-blend-mode: multiply; with a touch of opacity (0.75). Then behind that, I put a purple background pseudo element.