fix(curriculum): explain media queries (freeCodeCamp#47389)

* fix(curriculum): explain media queries

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>

Author: lasjorg

curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md

@@ -7,7 +7,19 @@ dashedName: step-27
 
 # --description--
 
-Now you need to make it responsive. Add a `@media` query with a `max-width` of `768px`.
+The `@media` at-rule, also known as a media query, is used to conditionally apply CSS. Media queries are commonly used to apply CSS based on the viewport width using the `max-width` and `min-width` properties.
+
+In the below example the padding is applied to the `.card` class when the viewport is `960px` wide and below.
+
+```css
+@media (max-width: 960px) {
+  .card {
+    padding: 2rem;
+  }
+}
+```
+
+Add a media query that will be applied when the viewport is `768px` wide and below.
 
 # --hints--