.notice {
  width: 90%;
  justify-content: center;
  border-radius: 1rem;
  border: black solid 2px;
  background-color: #ffc107;
  color: black;
  padding: 1rem;

  .notice-heading:before {
    /* equivalent to `.notice .notice-heading:before` */
    content: "ℹ︎ ";
  }

  &.warning {
     /* equivalent to `.notice.warning` */
     background-color: #d81b60;
     border-color: #d81b60;
     color: white;
    .warning-heading:before {
      /* equivalent to `.notice.warning .warning-heading:before` */
      content: "! ";
    }
  }

  &.success {
     /* equivalent to `.notice.success` */
     background-color: #004d40;
     border-color: #004d40;
     color: white;

    .success-heading:before {
      /* equivalent to `.notice.success .success-heading:before` */
      content: "✓ ";
    }
  }
}

.foo {
  color: red;
}

.bar {
  composes: foo;

  &.baz {
    color: blue;
  }
}

.foo {
  display: grid;

  @media (orientation: landscape) {
    & {
      grid-auto-flow: column;
    }
  }
}

@media (orientation: landscape) {
  .a {
    color: red;
  }
}

@media (orientation: landscape) {
  @media (orientation: landscape) {
    .b {
      color: red;
      composes: a;
    }
  }
}

.n {
  composes: a;

  @media (orientation: landscape) {
    color: red;
  }
}
