/* Side-by-side "how it looks" figures on the input type pages: the web
   rendering on the left, the 3D app on the right. One column on a phone. */
.compare {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1rem;
  align-items: start;
  margin: 1em 0;
}
.compare > figure {
  margin: 0;
}
.compare > figure > img {
  width: 100%;
  height: auto;
}
.compare > figure > figcaption {
  font-size: 0.8em;
  color: var(--md-default-fg-color--light);
  margin-top: 0.4em;
  text-align: center;
}
@media (max-width: 44.9375em) {
  .compare { grid-template-columns: 1fr; }
}