All solutions

Not sure whether using too many margins is good practice.

I am having trouble making the background-image responsive. I would really appreciate your help!

On mobile design, the image (.office-image) is smaller than its container (.image-container) for some reason. I set the .image-container::after height to 98.5% to fit it, bit it does not look clean.

I feel like I overdid it using flex on every card section, ignoring simpler ways to position.

Not sure whether I should change the font size for smaller screens.

Placing the quotation mark svg took the most time and I still could not figure it out. I am unsure whether articles giving a lot of bottom empty space when stretching vertically is normal.

Finding <main> width for a responsive card, and the z-index for the image hover effect was a bit hard. I am unsure if the transform: translate() is good for responsive layouts or not.

The hardest thing was responsive width, mixing min and max width. I am unsure of the minimize responsiveness and could not get the right fonts to work.

The design preview looks like it has box-shadows, I'm not sure though so I left it. I am unsure about using letter-spacing: -1px; to fit the text into the container.