Product Preview Card Component Using HTML and CSS

1. The font style for both "Gabrielle Essence Eau De Parfum" and "$149.99" is the same, and the only difference is the color. Is there a more efficient way to write the CSS code?
2. How do I make the card's size responsive to the user's screen size? (eg. @media rule?)
3. The challenge description says user should be able to "see hover and focus states for interactive elements". What does this mean?

Thank you for your answers in advance!