.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;
}
}