Question from the HTML5/CSS3 test

@supports ( display: grid ) or ( display: inline-grid ) {
    @media (orientation: portrait) {
        display: grid;
        grid-template-columns: 320px 320px;
    }
}

@supports (--badass-color: #bada55) {
   :root { --badass-color: #bada55; }
    body { color: var(--badass-color); }
}

@supports not (filter: blur(15px)) {
  .el { position: relative; }
  .el::after {
   content: '';
   display: block;
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   background-color: black;
 }
}

@supports (display: flex and display: flex-inline) {
    main {
        display: flex;
        flex-flow: row-reverse wrap;
    }
}