Address Operator (ampersand) & with @media query is not working

Question

I am sharing the code snippet below in which i am using nesting but I am confused how to use media query inside it.

. connection {

   @media only screen and (max-width: 1200px) {

       & > .list {

           grid-template-columns: 1fr;
       }
   }
}

Answer 1

From @media:

The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

@media only screen and (max-width: 1200px) {
  .connection {
    & > .list {
      grid-template-columns: 1fr;
    }
  }
}