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

/* Legacy stuff, but allowed by spec */
.class {
    color: red;

    @document url("https://www.example.com/") {
        color: green;
    }
}

a {;;
    color: black;
; ;
}

a {
;color: pink;
}

a{color:black}

a {
    width: 10px;
    @mixin mobile {
        height: 100px;
    }
}

a { color: a/* ; */ b  ; }

a { @unknown "a.css"; }

a { @unknown foo {} }

a/**/
{}

:root {
    --zero-size: {
        width: 0;
        height: 0;
    };
    --small-icon: {
        width: 16px;
        height: 16px;
    }
;
}