#intro-heading {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: min(650px, 85svh);
  padding: 64px 24px;
  overflow: hidden;
}

#intro-heading .intro-grid-canvas,
#intro-heading canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#intro-heading canvas { display: block; }

#intro-heading .dot-interaction_gradient {
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  pointer-events: none;
  z-index: 1;
}

#intro-heading .is-top {
  top: 0;
  background: linear-gradient(to bottom, #0b0f14, transparent);
}

#intro-heading .is-bottom {
  bottom: 0;
  background: linear-gradient(to top, #0b0f14, transparent);
}

#intro-heading h2 {
  position: relative;
  z-index: 2;
  max-width: 24em;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
}

@media (max-width: 640px) {
  #intro-heading { padding: 48px 0; }
  #intro-heading h2 { font-size: 28px; }
}