.cm-rule-visual {
  container-type: inline-size;
  align-self: start;
  min-inline-size: 0;
}
.cm-rule-visual > a {
  display: block;
}
.cm-rule-visual > a > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-control);
}
.cm-rule-visual .cm-prompts {
  color: var(--text);
  margin-block-start: 14px;
}
.cm-rule-visual .cm-prompt-title {
  margin: 0 0 12px;
  font: 700 1.0625rem / 1.35 var(--font-display);
  color: var(--text);
}
.cm-rule-visual .cm-prompt-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
}
.cm-rule-visual .cm-prompt-list > div {
  min-inline-size: 0;
  padding: 10px 12px;
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--r-control);
  background: var(--surface-alt);
}
.cm-rule-visual .cm-prompt-list dt {
  margin: 0 0 4px;
  font: 700 1rem / 1.35 var(--font-display);
  color: var(--brand);
  hyphens: manual;
  overflow-wrap: anywhere;
}
.cm-rule-visual .cm-prompt-list dd {
  margin: 0;
  font: 500 1rem / 1.5 var(--font-body);
  color: var(--text);
  overflow-wrap: anywhere;
}
.cm-rule-visual .cm-prompt-caption {
  margin: 12px 0 0;
  font: 400 .9375rem / 1.5 var(--font-body);
  color: var(--text-dim);
}
@container (min-width: 25rem) {
  .cm-rule-visual .cm-prompt-list--stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}