.demo-intro { padding-block: 54px; background: var(--surface); border-block-end: 1px solid var(--line); }
.demo-intro h2 { margin: 0 0 22px; text-align: center; font-size: 30px; line-height: 1.2; }
.demo-video { width: min(100%, 600px); margin: 0 auto; }
@media (max-width: 650px) {
  .demo-intro { padding-block: 34px; }
  .demo-intro h2 { font-size: 24px; margin-bottom: 18px; }
}
.demo-video-frame { aspect-ratio: 16 / 9; background: #18191b; position: relative; }
.demo-video-play, .demo-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.demo-video-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-video-icon {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: var(--action-bg); color: var(--action-text);
}
.demo-video-play:hover .demo-video-icon, .demo-video-play:focus-visible .demo-video-icon { background: var(--action-hover); }