responsive landing page using css flex-box

Give the img a max-width of 100% , mix blend-mode: multiply and opacity 0f 0.7, there is no need to give .desktop and mobile a fixed width and height value. to make each visible declare display: block. e.g :

img{ 
 max-width:100%;
  mix-blend-mode: multiply
 opacity: 0.7; or opacity: 0.8;
}

 in the mobile design:

.desktop{
  display: none;
 }
.mobile{
 display: block;
}

in the desktop design:

.mobile{
display: none;
}
.desktop{
display:block;
}

Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

Hope am helpful.

Well done for completing this challenge. HAPPY CODING