I'm struggling to handle images on websites responsively. I tried to find good content about it on forums and YouTube but couldn't so I decided to start a debate here to clarify the most common uses and some important edge cases.

I found a ways to solve the problems, but I feel like I made it wrong (or at least not in the best way), so I would like to discuss concepts no only the code.

My focus on this topic is center as much knowledge as possible about next/image, responsiveness and good practices, so if you think on other use cases, please add it and lets discuss together the better way to implement each one.

Case 1: Full width, fixed bottom background image. This section should have a responsive image fixed on the botton (second screenshot - /mobbiz page). I was able to place the image correctly but can make it responsive (when the width shrinks, the image becomes distorted.)

Case 2: Card with logos that have different sizes and aspect ratio, it must be responsive, and be centered (vertically and horizontally), example on the third screenshot. In this case I'm struggling with the sizes, I tried to use fixed width and height but it didn't work so I forced the height using CSS.

Case 3: Hero section with two columns, the first one has content (60% of the width), the second one should have a responsive image that fill the other 40% of the screen. Both must be vertically centered and the minimum height of the section is 100vh (first screenshot - home page).

Repository link: https://github.com/the-almeida/galileosoft.com.br
Website link - ImageBackground (first screenshot): https://www.galileosoft.com.br/mobbiz
Website link - Responsive grid with different image sizes and aspect ratios (second screenshot): https://www.galileosoft.com.br/ploomes
Website link - HeroSection (third screenshot): https://www.galileosoft.com.br/

PS: If you like to share any advice or tip about image handling, I would love to discuss and understand better this topic.