Fix use cases page responsiveness

[Prakash1185]

Problem

• Top section image was not visible on smaller screens
• Company logos had overflow issues and were not properly aligned on smaller screens
• Cards layout was not properly responsive for smaller screens
• Only two use cases cards were showing on large screens

Changes Made

• Fixed the top section image visibility issue
• Company logo now shows all the images of companies on smaller screens without overflow
• Improved the card layout
• Now three cards are shown on larger screens, properly centred

Screenshots

Before	After

[Prakash1185]

Hi @SbloodyS, @ruanwenjun
This PR fixes responsiveness and layout issues on the Use Cases page across screen sizes.

Please review and let me know if any further changes are needed. Thank you.

[Copilot]

Pull request overview

This PR updates the Use Cases page styles to improve responsiveness across breakpoints, addressing image visibility, logo overflow/alignment, and the card layout on small and large screens.

Changes:

• Refactors the hero (“top”) section layout for better stacking/sizing on smaller viewports.
• Updates the user/company logo list styling to prevent overflow and improve spacing.
• Converts the use case cards layout from flex-wrap to a responsive CSS grid.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Setting overflow-x: hidden on the .usecase root can mask underlying layout issues (e.g., fixed widths / grid min sizes) by clipping content instead of making it responsive. If this was added to hide horizontal overflow from the new layout, it’d be better to fix the overflowing child styles and only use overflow clipping on the specific element that needs it.

[Copilot]

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) can still overflow on very small viewports (e.g., 320px wide screens, especially with container padding), because the column minimum can’t shrink below 300px. This is likely the root cause of needing overflow-x: hidden and can result in clipped cards. Consider using a responsive minimum (e.g., minmax(min(300px, 100%), 1fr)), or add a breakpoint that switches to grid-template-columns: 1fr below ~360px.

Suggested change

	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));

[Copilot]

On large screens, @include content-width sets a fixed width: 1280px but does not set box-sizing: border-box. Since this selector also adds horizontal padding (padding: 60px 20px 80px), the rendered box can become wider than 1280px (width + left/right padding), reintroducing horizontal overflow. Consider adding box-sizing: border-box to .usecase-cases (or avoid horizontal padding when using fixed widths).

Suggested change

	@include content-width;
	@include content-width;
	box-sizing: border-box;