[BUG] Misalignment of Height and Spacing in Case Study Block on Desktop and Mobile Views.

[Sonalilipsa17375]

Describe the bug.

Desktop View Issues:

• The case study boxes (ASEO and HDI divs) are currently displayed in 3 columns instead of 2, causing misalignment of the boxes.
• The ADEO block has a smaller height than the HDI block, resulting in non-uniformity in the UI.

Mobile View Issues:

• The same height inconsistency is present as in the desktop view, where the boxes do not have uniform heights.
• There is no vertical spacing between the boxes, making it difficult to visually distinguish between the blocks.

Expected behavior

• Ensured uniform heights for all case study blocks (ADEO and HDI) across both desktop and mobile views.
• Added proper vertical spacing between the boxes in the mobile view for better differentiation.

Screenshots

How to Reproduce

• Navigate to the Case Studies page.
• Observe that the heights of the boxes (ASEO and HDI) are different, causing misalignment in the layout.
• Switch to mobile view and notice:
  • The boxes have the same height inconsistency issue as in the desktop view.
  • There is no distinct spacing between the boxes vertically, making the blocks appear merged.

🥦 Browser

Google Chrome

👀 Have you checked for similar open issues?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[Sonalilipsa17375]

#3511 I had earlier made this PR , where the required changes are visible. Kindly review and assign me. I would love to work on this.