resultsSummaryComponent using HTML and CSS

Hi there,

This is a really good first solution! The design matches the mockup nicely - well done! It's also great to see you've locally hosted your fonts too (and in the correct format.) I've listed a few points below worth considering when refactoring this

• To make this responsive, you can use either flex or grid. I can see you've used flex on the child elements, so it's best in this case to also add this property onto the parent container and adding a flex-direction: column on a width of, for e.g. 640px (using @media queries.) By default, the flex-direction is row, so this doesn't need to be explicitly set.
• It's also best to avoid setting explicit height and width properties on your parent containers, as this can cause overflow issues as the viewport width changes. Instead, use an explicit max-width value, and a width: 100%, so at any viewport width below the max-width, the content takes up the full amount and at any viewport width above the max-width, the content remains fixed within it. Flex will then take care of adjusting the elements within the space provided
• For semantic purposes, wrap your parent container in a main element for accessibility purposes - it helps screen readers and assistive technologies identify where the primary content of the document body is located
• Make sure to have your font-size in rem for accessibility purposes. Here's a good link explaining this in further detail Link

Hope this helps!