CSS Grid and flexbox combination landing page.

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have a suggestion regarding your code that I believe will be of great interest to you.

ISSUE WITH BANNER IMAGE ⚠️:

• Currently the Banner image is not properly placed on screens because of flex-basis property for img element within .imageHolder, the image can be automatically get filled full width because of using width: 100% for img.

• Due to this some devices may face the shrinked layout of Banner Image, It happens for my device. Here's the preview of that Bug.

• Here's the update css rules,

.mainImage {
  width: 100%;
  object-fit: cover;
}

• We removed max-height so that the image can be enlarged as per the grid layout changes according to various screen sizes (just like my device), and as extras we added object-fit: cover this will help us to prevent image from distortion during expanding/shrinking image during image placement.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!