How can we apply part of a style sheet based on the result of one or more media queries?

/* At the top level of your code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

@media (max-width: 350px) {
    :root {
      --penguin-size: 200px;
    }
  }