/* The teaser: the interface equation, opening the article. The drawing is all
   js/steering-ui.js and css/steering-ui.css — mounted by js/teaser.js, which is
   why the figure carries `uise` as well as `vxt`. All this file does is place
   it, since the inherited rule for the old placeholder teaser fixes
   d-figure.teaser to the text column at 280px tall. */

d-figure.teaser.vxt {
  grid-column: page;
  height: auto;
  /* Tighter than the 2.5rem the equation carries in the article body (.uise), so
     the caption stays attached to the drawing it belongs to up here. */
  margin: 1.5rem 0 0.75rem;
}

/* Narrow screens: css/steering-ui.css stacks the three windows one per line
   below 900px, and each is capped at 420px there, so the figure needs no width
   of its own — but the page column still has to give way to the text column's
   margins on a phone. */
@media screen and (max-width: 900px) {
  d-figure.teaser.vxt {
    grid-column: text;
  }
}