[Docs] Fix alignment of Be Recognized card background illustration

[piyushtripathi9424]

Description

This PR fixes the alignment and sizing issue with the background illustration in the "Be Recognized" card (#1156).

Root Cause: The background-size: 50% property was being applied to both the black semi-opaque background and the recognition-program.png logo. Because the logo is much taller than it is wide, keeping its width at 50% caused its height to stretch and peek out from behind the square black background.

Fix: Extracted .recognition-program-logo into its own CSS rule and increased the size of the black semi-opaque background to 75% while preserving the logo size at 50%. This ensures the logo is fully contained within the background circle, visually matching the other resource cards.

Fixes #1156

Screenshots 📸

Before	After

Summary by CodeRabbit

• Style
  • Improved recognition-program catalog logo display with dedicated sizing, positioning, repeat, and minimum-height settings.
  • Updated the catalog and academy selector styling to exclude the recognition-program logo.

[welcome]

Yay, your first pull request! 👍 A contributor will be by to give feedback soon. In the meantime, please review the Layer5 Community Welcome Guide and sure to join the community Slack.
Be sure to double-check that you have signed your commits. Here are instructions for making signing an implicit activity while peforming a commit.

[gemini-code-assist]

Code Review

This pull request updates SCSS styles for landing project logos and video carousels. Specifically, it isolates the styling of .recognition-program-logo to apply custom background sizes and a minimum height, and nests carousel-related classes under .related-videos while updating transition effects, colors, and active states for indicators. There are no review comments, and I have no additional feedback to provide.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[github-actions]

PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2026-08-04 13:13 UTC

[dhruveshmishra]

@piyushtripathi9424 LGTM🚀

[piyushtripathi9424]

@piyushtripathi9424 LGTM🚀

Thankyou ❤️

[Bhumikagarggg]

@piyushtripathi9424 Thank you for your contribution! Let's discuss this during the website call today (20 July) at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

[piyushtripathi9424]

@piyushtripathi9424 Thank you for your contribution! Let's discuss this during the website call today (20 July) at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

Thank you! I’ll add it to the meeting agenda/minutes and discuss it during today’s website call at 5:30 PM IST. 🙂

[Maanvi212006]

@piyushtripathi9424 any updates?

[piyushtripathi9424]

@Maanvi212006 No updates from my side. The PR is ready please let me know if any changes are needed. Thanks!

[Maanvi212006]

LGTM!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e1572a97-92b4-403f-8ee7-2168c44efacf

📥 Commits

Reviewing files that changed from the base of the PR and between a3f5a9a and c3df117.

📒 Files selected for processing (1)

• assets/scss/_landing_project.scss

---

📝 Walkthrough

Walkthrough

The landing project now applies dedicated background positioning, sizing, repetition, and minimum-height rules to the recognition program logo. The logo is removed from the shared catalog and academy selector.

Changes

Recognition Program Logo Styling

Layer / File(s)	Summary
Dedicated logo background styling assets/scss/_landing_project.scss	.recognition-program-logo now has dedicated background settings. The shared selector only targets .catalog-logo and .academy-logo.

Estimated code review effort: 1 (Trivial) | ~3 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the fix to the Be Recognized card background illustration alignment.
Linked Issues check	✅ Passed	The SCSS changes address issue #1156 by separating logo styling and correcting the illustration alignment and sizing.
Out of Scope Changes check	✅ Passed	The changes are limited to relevant SCSS styling for the Be Recognized card background illustration.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}