responsive page landing using flexbox

Hey, Elvis perhaps you could nest another div within your card-img div and name it with a class of "overlay". Then put this div directly before your img tags so that it sits on top, then you can target it in CSS with hsla. The a is for the alpha channel which controls your opacity.

.overlay { position: absolute; width: 100%; height: 100%; background: hsla(277, 64%, 61%, 0.5)

setting the alpha channel to 0.5 gives you 50% opacity, this is what I did to get my image colored the correct way however I'm still new so there could be another better way. Hopefully, this helps.

Nice well done, good effort. As for your problem with the image overlay, you can solve it like this.

.card-img {
  position: relative;
}

.card-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #aa5cdb;
  mix-blend-mode: multiply;
  opacity: 0.8;
}

If this doesn't make sense to you let me know