Responsive page using flex column reverse

Nice well done. For the overlay apply these changes, to make it look like the one on the design file

.img::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--soft-violet);
    opacity: .5; /* change it to .8 */
    mix-blend-mode: multiply; /* add this line */
}