CSS: nested media query

media query inside curly bracket

when media query at-rule is nested inside curly brackets, it means apply the media query styles to the parent selector, when the media query condition is true.

nesting media query is great for grouping selector rules together.

p {
 font-size: 1rem;

 @media (min-width: 768px) {
  font-size: 1.1rem;
 }
}

/* is equivalent to */

p {
 font-size: 1rem;
}

@media (min-width: 768px) {
 p {
  font-size: 1.1rem;
 }
}