20. What are media queries in CSS and what are they used for?

Media queries allow applying different styles depending on device properties such as screen width, screen height, resolution, color mode, and others. They are essential for responsive web design, adjusting the layout and style to various devices.

/* Example of media query */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    body {
        background-color: lightgreen;
    }
}

@media (orientation: landscape) {
    body {
        background-color: lightcoral;
    }
}