Vanilla HTML and CSS; Flexbox; Media query;

You can also apply an overlay this way:

HTML:
<div class="container-with-background-img">
   <div class="overlay"></div>
   ...
</div>

CSS:
.container-with-background-img {
   background-image: url("...");
   position: relative;
}
 
.overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: black;
   opacity: 0.6;
}

Just wanted to say that your code is so clean. I learned a lot with it :)

Hi Fabio! I mean... it works well :) Another way to achieve a similar effect would be to set the image in background-image, add the violet in background-color and use the background-blend-mode property. Not saying that this would be better but it's good to be aware of options!

Hope this helps :)

🌟🌟🌟🌟🌟 Looks good

maybe this will help you with the overly color https://highrise.digital/blog/css-blend-modes/