Improve the styles for case studies' pages

[shurup]

Description

This PR iterates on yesterday's #49587 to improve CSS styles for case studies. Mainly, it fixes two issues:

1. Makes the featured case study (with video) two-columned: a quote on the left and a video on the right (the size of the YouTube embed now allows us to watch it). That's what we will see:

2. Helps to avoid this situation with two narrow text descriptions on smaller screens like it's shown below:

It also includes a tiny fix for a single case study page (font colour and extra space for the title).

P.S. It still leaves room for improvement for the mobile view since @Arhell wanted to handle that.

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign natalisucks for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[netlify]

✅ Pull request preview available for checking

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9b372e7
🔍 Latest deploy log	https://app.netlify.com/sites/kubernetes-io-main-staging/deploys/679b214bb1f20e0008bf5d19
😎 Deploy Preview	https://deploy-preview-49598--kubernetes-io-main-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sftim]

Does this break any other pages? eg training

[shurup]

As far as I could check, it doesn't affect any other pages (I found the gridPage class used on the Main and Partners pages).

[sftim]

/lgtm

[k8s-ci-robot]

LGTM label has been added.

Git tree hash: d7cdfbbdd783679dd274e206aadb9588902381da