fix: resolve card overflow and layout issues in Learn page sections

[AnkitRewar11]

Description
This PR fixes #7807

This PR fixes two layout issues on the layer5.io/learn page where card sections were not displaying properly on desktop screens.

Issue 1: Learning Paths cards overflow

File: src/sections/Learn/LearnPage-Sections/learning-path.js

The three cards in this section did not have proper width settings for desktop screens, so they were overflowing the row and getting clipped on the sides.

Fix: Added the missing width settings ($md, $lg, $xl props) to the Col component so all three cards now fit properly within the row on all desktop screen sizes.

Issue 2: Workshops cards collapse to 2 columns

File: src/sections/Learn/LearnPage-Sections/workshops.js

The workshop cards were missing width settings for some desktop screen sizes, and an existing CSS rule was forcing them into a 2-column layout. This pushed the third card off-screen.

Fix:

• Added the missing width settings to the Col component.
• Replaced the hardcoded card width value with a CSS variable, so it's easy to update later if the number of cards changes.

Bonus fix: Cards were different sizes

While testing, I noticed the cards were also showing up in different sizes instead of being equal.

Fix: Removed a margin: auto rule that was causing uneven spacing, and made sure all card images use the same width and crop style so every card looks consistent.

Testing

• Ran npm run build — build completed successfully with no errors.
• Tested locally with gatsby develop on both desktop and mobile screen sizes. All cards now show up at equal sizes with even spacing, no overflow, and no unexpected column changes.

Notes for Reviewers

Signed commits

• Yes, I signed my commits.

[github-actions]

🚀 Preview deployment: https://layer5.io/pr-preview/pr-7813/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

[AnkitRewar11]

@Rajesh-Nagarajan-11

[Sbragul26]

This section is not responsive on mobile. Some content is getting cut off. Could you please make it responsive for smaller screens?

Preview

[AnkitRewar11]

Hi @Sbragul26

I took a closer look at the mobile card sizing issue. The desktop layout is now working as expected, but the second card still appears a bit smaller on mobile.

From what I found, the issue doesn't seem to be coming from the CSS. The three thumbnail images have different aspect ratios, which makes the cards look visually uneven.

I don't think we can completely solve this with CSS alone without creating other visual compromises elsewhere.

[AnkitRewar11]

@Rajesh-Nagarajan-11 @Sbragul26

[kanishksingh23]

@AnkitRewar11, can you please push a new commit to generate a fresh preview.

[AnkitRewar11]

@AnkitRewar11, can you please push a new commit to generate a fresh preview.

done

[Bhumikagarggg]

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