🐛 Fix: UI is not perfect at Hero Section #40288

[abhisheksharmacodes]

#40288

Issue #40288 pointed out a UI fix for hero section stating that the image goes out of the screen. The changes has been made to fix this issue in file: responsive.amp.html

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Copilot]

Pull Request Overview

This PR addresses issue #40288 by constraining the hero image and its container to prevent horizontal overflow.

• Adds max-width and overflow: hidden to the figure and .content-container wrappers.
• Updates the amp-img CSS and attributes to enforce responsive sizing with a fixed aspect ratio.

Comments suppressed due to low confidence (3)

examples/responsive.amp.html:148

• The CSS rule height: auto; can override AMP's layout="responsive" aspect-ratio handling. Consider removing height: auto; so AMP maintains height based on the width and height attributes.

      height: auto;

examples/responsive.amp.html:152

• Consider adding box-sizing: border-box; to .content-container to ensure its padding is included in the element's total width calculation and avoid unexpected overflow.

      padding: 15px;

examples/responsive.amp.html:149

• [nitpick] Align the closing brace indentation with the opening rule to maintain consistent code style and improve readability.

    }

[erwinmombay]

can you provide a before and after screenshot of what these changes are and how they affect hero images?