fix(css): post header margin on mobile

[David-Guillot]

What does this PR change? What problem does it solve?

On mobile, the spacing between the page header and the post title feels too big. I guessed this is caused by the use of hard-coded 24px on margin-top instead of the --gap variable, whose value is 24px by default but get down to 14px on smaller screens and mobile.

See the difference on the theme Install page:

Before	After

Was the change discussed in an issue or in the Discussions before?

Clearly not 😬

PR Checklist

• This change adds/updates translations and I have used the template present here.
• I have enabled maintainer edits for this PR.
• I have verified that the code works as described/as intended.
• This change adds a Social Icon which has a permissive license to use it.
• This change does not include any CDN resources/links.
• This change does not include any unrelated scripts such as bash and python scripts.
• This change updates the overridden internal templates from HUGO's repository.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud