Responsive landing page using flexbox and grid w/ some positioning

And on CSS

• NEVER write font size in px! Or line height or letter spacing.
• normalize is a really old css reset and a lot isn't needed any more. I recommend you look up more modern resets like those by Andy Bell or Josh Comeau
• make sure any max widths for components or content is in rem not px so it is more responsive for all users, including those who change their font size settings
• buttons/ctas usually have padding. Worth checking. You don't want to create the whole height of a button with line height. Remember content editors could write more text in there or users change font size so they can end up wrapping over 2 lines. If relying on line height instead of padding for button height that could have undesirable results.
• if an icon and text is in a button consider using inline-flex and gap instead of margin-right on the icon. Just a more modern approach and common to prepare for different languages/text directions.
• similarly, using flex and gap would be shorter so more performant for the social links
• you should never ever need a media query at 375px wide
• media queries must always be defined in rem or em for a fully responsive result
• I am away from my computer so cannot check, but the sheer number of media queries in this stylesheet and the amount of pixels being used gives a code smell. That implies to me that this may have problems on some devices tbh. But like I said, I can't check it to be sure

Hello

Good job on this

A few tips from reading the html:

• there is no reason to use aria-hidden true on decorative images that already have an empty alt attribute. That's a waste of bytes
• make sure media queries are always defined in rem or em, including in the picture element
• b is a deprecated tag. If you want bold emphasis, use strong.
• remember text should never be in meaningless elements only (like div, span, b, em, small). Use a paragraph if it's it's own paragraph or make sure it is inside a parent paragraph
• all the social links are inaccessible at the moment because you've not labelled them with the name of the social platform. Make sure you add aria hidden true and focusable false to the inline svgs on those too - this ensures they are not announced as unlabelled images by some assistive technology
• if links are opening in a new tab this needs to be included in the link label eg "Facebook (opens in a new tab)"
• if list styles are removed from a ul in css that list loses its semantics in IOS. To restore this, add role="list" to the ul and role="listitem" to each li