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 :grimacing:

PR Checklist

• [ ] This change adds/updates translations and I have used the template present here.
• [x] I have enabled maintainer edits for this PR.
• [x] 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.
• [x] This change does not include any CDN resources/links.
• [x] 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.