All solutions

• How to solve the picture tag in NextJS?
  • if I use it with the Image component from NextJs It doesn't optimize my image in the source tag.
  • I found a solution for this they told you to display: none; the image you don't want to show if the screen is not in the correct size.

How do you change from a variable that has HSL color as a value to HSLA color in CSS?

:root {
  --clr-red: hsl(0, 100%, 50%);
}

main {
  background-color: hsla(var(--clr-red), 0.5); -- not work
}

This is my second solution for the Frontend Mentor challenge. Any suggestions to improve my coding are welcome.

• The difficulty of this project is transforming from a Desktop version to a Mobile version. I feel like using the Mobile-First workflow is much easier.
• I do not know about 2 images when on mobile and desktop because I want to try out picture tags in HTML but am not so sure about it so skip it for now.

I want to know the best way to handle 2 images 1 for mobile and another for desktop.