What is wrong with this CSS when try to validate?

When I validate my CSS, the following triggers an parse error:

.srow {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        * {
            flex: 1;
        }
    }
    .aside {
        flex: 0 25%;
        @media (max-width: 500px) {
            flex: 0 100%;
        }
    }

If I remove both the .gap and @media blocks, no error. What is wrong with the CSS?

You need to sign in to view this answers