.foo {
  display: grid;
}
.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}
.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
    @media (min-inline-size > 1024px) {
      max-inline-size: 1024px;
    }
  }
}
@media (orientation: landscape) {
  & {
    grid-auto-flow: column;
  }
}
.foo {
  color: red;
  @media (min-width: 480px) {
    & h1, & h2 {
      color: blue;
    }
  }
}
.class {
  @supports not (display: grid) {
    float: right;
    & .class {
      color: red;
    }
  }
}
.class {
  color: blue;
  @supports not (display: grid) {
    float: right;
    & .class {
      color: red;
    }
  }
}
.class {
  color: blue;
  &.foo {
    color: green;
  }
  @supports not (display: grid) {
    float: right;
    & .class {
      color: red;
    }
  }
}
.class {
  color: red;
  @document url("https://www.example.com/") {
    color: green;
  }
}
