Stats Preview Card Component

Why your h2 elements don't align with the secondary p elements:

• It's because of the rule:

@media (min-width: 768px){
    .information p:first-of-type{
        margin: 5% 15% 2% 10%;
    }
}

I think you intended for this rule to target the first <p> element in the <div class="information"> element, but it ended up targeting all the p elements in that element.

There are two ways about it:

• Assign an ID to the <p> element, and apply that rule based on the ID selector. Eg I would change it to <p id="description"> Then my rule will be changed to

@media (min-width: 768px){
    .#description {
        margin: 5% 15% 2% 10%;
    }
}

• Another way is to override the margins in the <p class="upper"> elements. Originally p.upper{} alone was not specific enough (refer to CSS selector specificity), so I had to specify:

@media (min-width: 768px){
    div.data_text p.upper {
        margin: unset;
    }
}

Onto other comments:

• I like how your code is mobile first and the fact that you used CSS resets.
• However on some screen sizes (around 900px), the statistics overflowed out of the container, so you might need to consider these screen sizes as well.
• On smaller screen sizes, it looks nicer if there was lesser horizontal padding so there is more space for text, eg:

information {
    padding: 12% 5%;
    flex: 2;
}

instead of just padding 12%;

You might want to adjust the Image height on mobile view. Nice work.