Adjust the `<Image />` components to meet Next.js 13 requirements

[mariana-caldas]

What do we need to build or fix?

In order to update to Next.js 13, we are using import Image from 'next/legacy/image' on the components Card.js and TwoColumns.js. We need to adjust the <Image /> components on those components so they match the new Next.js 13 requirements and we can, then, remove the legacy flag.

Technical details

Adapt the <Images /> components by checking the documentation guidelines

Approach suggestions

• In the documentation, they mention the styling properties should be added to the CSS files. Check the properties objectFit and layout on the components and transfer the functionality to their respective stylesheets.

Deadline

Please keep in mind that once you assign this task to yourself, you'll need to complete it in 10 days.

Acceptance criteria

• Test the section and components in many screen sizes, you can use the Inspect tool for that.
• Please test if the new changes added to the components do not affect the other instances.
• Test the feature in many browsers, such as Chrome, Firefox, Edge, and Safari (MAC).
• If there are any build problems when submitting your PR, run yarn build locally to solve the issues and commit the changes.
• Update the CHANGELOG.md file.

[Faith-Nchifor]

App still functions as expected

[mariana-caldas]

App still functions as expected

I'm not sure what you mean, @Faith-Nchifor . Feel free to elaborate on your comment and maybe questions and ping me or @cherylli on Slack if necessary.

[Faith-Nchifor]

I'm sorry for not explaining clearly @mariana-caldas. I meant the changes for the components are okay.
Personally, I tried to make the changes before assigning myself to this task but I got some errors. I know see what @cherylli did and hopefully I will do the next task successfully.