chore: Use new layout colours - Step 4

[lilyndk]

Description

NOTE: To avoid review of long PRs, this PR is dependent on/'split from' the main branding change PR, i.e. dependent on the changes in:

• card.scss
• layout/default.html
• custom/_variables.scss
• main.scss
• custom.scss
• mixins.scss
• page-header.html

New branding

• Added new colour and typography variables

Bug/refactor

• Refactored card component styles across all pages to: -- consolidate code -- fix inconsistencies in markup and styling -- fix inconsistencies related bootstrap component documentation -- reduce use of style classes in html markup
• Fixed team members images to use square ratio and align with the other cards on the Team page

Stock images addition:

• Added mentorship resources CTA images

Change Type

• [X] Bug Fix
• [X] New Feature
• [X] Code Refactor
• [ ] Mentor Update
• [ ] Documentation
• [ ] Other

Related Issue

• Update branding colour: https://github.com/WomenCodingCommunity/WomenCodingCommunity.github.io/issues/189
• Create reusable font styles: https://github.com/WomenCodingCommunity/WomenCodingCommunity.github.io/issues/38
• bug: Fix inconsistent page use of semantic HTML elements (https://github.com/WomenCodingCommunity/WomenCodingCommunity.github.io/issues/200)

Screenshots

AFTER: BEFORE:

AFTER: BEFORE:

AFTER:

BEFORE:

AFTER: BEFORE:

Pull request checklist

Please check if your PR fulfills the following requirements:

• [X] I checked and followed the contributor guide
• [X] I have tested my changes locally.
• [X] I have added a screenshot from the website after I tested it locally