Multi-page website using HTML, SCSS & Vanilla JS

Hey there Frontend Mentors! Thank you for looking at my solution. Any feedback would be greatly appreciated.

One issue that I struggled with and couldn't come up with a satisfactory solution is this: It looks like if you shrink an image by using "transform: scale()", the image appears smaller, but still occupies it's original dimensions. Is there any way to have their real dimensions change dynamically? For this challenge there were many images, of varying sizes, I needed to shrink and have next to each other. I ended up having to hardcode the width for each individual image. Is there a better solution to this problem?