Product Review Component using Flexbox and Media Query

I'm most proud of how clean and responsive the final layout turned out, especially switching between desktop and mobile views. Getting the image to stack on top for mobile and sit beside the text on larger screens was a rewarding challenge, and I was happy with how well the design stayed consistent across devices.

If I were to do it again, I'd pay even closer attention to accessibility from the start, including better semantic elements and alt text. I’d also consider adding a light hover animation or small transitions to the button to enhance the interactivity.

One of the main challenges was vertically centering the card while keeping the attribution text positioned properly on the page. Initially, my layout was causing the attribution to sit awkwardly to the side of the card instead of below it.

I overcame this by restructuring the HTML to wrap both the card and attribution inside a container div, and then using flex-direction: column with align-items: center to stack everything properly. I also used gap to space out the content without needing extra margins. Though I believe I've seen feedback on others projects NOT to use gap...so any advice on the proper usage would be appreciated.

Another challenge was handling the responsive image layout, especially making sure the card image resized nicely and aligned well with the text. I resolved that by using percentage-based widths and media queries to switch flex directions between row and column layouts.

I’d love to get feedback on how to make the layout even more scalable and maintainable, especially when dealing with more complex designs or components. Specifically:

• Are there any best practices for structuring the layout that I could use to make future projects easier to scale?

• What’s the best way to approach fluid typography and spacing that adjusts more elegantly across breakpoints?

• Are there accessible or semantic HTML improvements I can make to strengthen the structure further?