Responsive and accessible Huddle Landing Page using Flex & Grid

The HTML Validation Report Errors are caused by FontAwesome. Nothing wrong w/ my code.

Update: Feb 9, 2023

I reworked the website a little bit to make it as responsive as possible without the bugginess from certain widths. I wanted to make sure the image didn't get too large at certain widths (particularly aroung 768px to 1200px), so added a second media query to have a maximum width on the image. I then added a max-width: 100% to allow the image to grow, and added width: 50% so it would stay within the screen space. I would love to know if there's an easy way to accomplish it without relying on grid. I also made the social media icons slightly larger to accommodate the larger screen sizes.

For a while, I was trying to avoid using grid in the body in favour of margin and padding. However, using grid with place-content: center provides a different, but more accurate width of the content than using margin-inline: auto. I resolved myself to using it.