Media queries allow us to apply different styles depending on the device's screen size or other characteristics (e.g., resolution, orientation). They enable us to create responsive designs that adjust to various screen sizes like desktops, tablets, and mobile phones.
Try resizing your browser window or viewing this page on different devices. You'll notice that the box adjusts in size and font depending on the screen width.
The CSS below uses media queries to change the style of the `.box` based on screen size:
1. What does the `max-width` media query do?
2. What screen sizes will the `@media only screen and (max-width: 768px)` target?
3. How can you target a device with a minimum width of 1024px?