Solution to the Stats preview card component challenge

I come up with a lot of questions in this challenge:

1. @media

@meida is used for CSS in different screen size. Is there any industry standard of the @media code structure? For example:

.div1 {}
@media {
  .div1 {}
}
.div2 {}
@media {
  .div2 {}
}

and

.div1 {}
.div2 {}
@media {
  .div1 {}
  .div2 {}
}

Which one is preferred?

2. div box same height as image height

In the challenge, initially I used <img> for the card image but then I found that I didn't know how to set the div box responsively same height as the image inside the div box. Finally I used background image instead.

Can it be possible to set the div box same height as the image when <img> is used?

3. Gap space between Flexbox

I used margin to set the gap space between flexbox (the Stat Section). Is there any property instead of margin that can set it?

4. class and id

Is it common to give an id to a div box? Or it is more common to use class?

5. tricks or tool to easy size measurement

As you know, the preview from Frontend Mentor challenge is jpeg image. When I am dealing with the size and value (e.g. padding, margin, font size，color), I have to keep testing by my eyes. Is there any tricks or tools so that I can easily get the value?