Issue 1: Default global content styling

[msagolj]

• [x] Adjust width of body for site pages as on original site.
• [x] Adjust default content styles (default colors, font sizes etc.) in styles.css
• [x] Add fallback font
• [x] Add favicon
• [x] Adjust media breakpoints, as/if required

Fix #1

Test URLs:

• Before: https://main--piramal--aemsites.hlx.page https://main--piramal--aemsites.hlx.page/mirko-test-page-styles
• After: https://issue-1--piramal--aemsites.hlx.page https://issue-1--piramal--aemsites.hlx.page/mirko-test-page-styles

[aem-code-sync[bot]]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed. In case there are problems, just click a checkbox below to rerun the respective action.

• [ ] Re-run PSI checks
• [ ] Re-sync branch

Commits

* [6a1e31c](https://github.com/aemsites/piramal/commit/6a1e31c2c0bc753290dd87b8f17f469b32715fb1) :white_check_mark: (latest) * [91b60ae](https://github.com/aemsites/piramal/commit/91b60ae83d9184dc6fb204ed64898b1fadfaa820) :white_check_mark: * [455e075](https://github.com/aemsites/piramal/commit/455e075ebadc7fb1e155cd0775265fcdc0b8c74c) :white_check_mark: * [1c7eccd](https://github.com/aemsites/piramal/commit/1c7eccdd020958b69d890ef4888f609844396f14) :white_check_mark: * [60a0b0e](https://github.com/aemsites/piramal/commit/60a0b0e33988e9f423e2080dd21a54419ceb1e0f) :white_check_mark:

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/
/mirko-test-page-styles

[asthabh23]

Also, @msagolj as per : https://pagespeed.web.dev/analysis/https-issue-1--piramal--aemsites-hlx-page/2oootukycw?utm_source=psi&utm_medium=redirect&form_factor=mobile

there is an accessibility issue coming up around the sequence of headings (h3 -> h1 -> h4) - so levels are getting skipped. This needs to be updated to maintain the sequence.(highlighted parts in DOM below)

[msagolj]

Also, @msagolj as per : https://pagespeed.web.dev/analysis/https-issue-1--piramal--aemsites-hlx-page/2oootukycw?utm_source=psi&utm_medium=redirect&form_factor=mobile

there is an accessibility issue coming up around the sequence of headings (h3 -> h1 -> h4) - so levels are getting skipped. This needs to be updated to maintain the sequence.(highlighted parts in DOM below)

@asthabh23 these are all headings where the H level can be edited by the author. h3 -> h1 should be ok, h1 -> h4 are titles so they can be changed. In their original site they don't see the issue because because the h4 is a div , so its on them to decide what supposed to be a title or just text.

In general their site is inconsistent whith using

or for titles e.g. 'Happy Customers ' is an H2 while 'Primal Since 1980' is a styled DIV