Description

When the viewport width is between 640px and 1024px (sm–lg breakpoints), the hero section on the homepage causes horizontal overflow and visible layout shift.

This results in unintended horizontal scrolling and misalignment of the decorative pattern / layout elements within the hero section.

The issue is consistently reproducible by resizing the browser window within this range. It does not appear on larger desktop screens (>1024px) and is less noticeable on very small screens.

I have verified this locally and can work on fixing the responsive layout if approved.

Steps to Reproduce

1. Run the project locally.
2. Open the homepage (/).
3. Resize the browser window to a width between 640px and 1024px.
4. Observe horizontal overflow and layout shift in the hero section.

Expected Behavior

The hero section should remain fully contained within the viewport at all screen sizes, without causing horizontal overflow or layout shifts.

Environment

• OS: Windows
• Browser: Chrome
• Project: AOSSIE website (local development)

Screenshot