[Home] Invisible text on mobile

[liviopersonne]

Describe the bug
On mobile, there is some invisible space at the top of the home page in light mode. The text is white on a white background.

To Reproduce
Steps to reproduce the behavior:

1. Open the website on mobile (switch with ctrl + maj + m on desktop firefox)
2. Activate light mode
3. There is a blank space

Expected behavior
The text should be black so we can see it on the white background.

Screenshots
What is happening:

What should happen:

Additional context
The problem is because the text has the text-white class, when it should be text-black on light mode.

[t-webber]

The expected UI in my opinion is without such an awful grey behind the title and without the rounded borders around the grey that gives a glimpse of the white background in the corners.

[liviopersonne]

All the problems are caused by the variation of the screen width.

Under 1024px, the description text is displaced under the image.

Under a lower limit, the title and the grey rectangle are also displaced.

The grey rectangle is supposed to cover the image, that's why it looks weird when it gets moved down.

[liviopersonne]

For now, I made it so that the text never becomes invisible, but we should look into how the site behaves with different widths in general