Is there an idiomatic way to accomplish this (and have it be smooth rather than discrete)?

@container (aspect-ratio < 1) {
  .title {
    opacity: 0.1;
  }
}

@container (aspect-ratio < 0.9) {
  .title {
    opacity: 0.2;
  }
}

@container (aspect-ratio < 0.8) {
  .title {
    opacity: 0.3;
  }
}

/* etc */

The .title element is the direct child of the container.