.hero-demo { width: min(100%, 540px); }
.demo-devices { position: relative; aspect-ratio: 1 / 1.19; }
.hero-demo .child-shot {
  position: absolute;
  inset: 0 auto auto 0;
  width: 82%;
  border: 7px solid #3C332D;
  border-radius: 24px;
  overflow: hidden;
  background: var(--tm-canvas);
}
.hero-demo .parent-shot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  border: 5px solid #3C332D;
  border-radius: 28px;
  overflow: hidden;
  background: var(--tm-canvas);
  z-index: 1;
}
.demo-caption small { display: block; font-size: 10px; }
.child-shot img[hidden] { display: none; }
@media (min-width: 781px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .hero .actions .button-secondary { display: none; }
}