/* v31: component labels on the Overview NIC illustration only. */
.summary-hero-visual .label-payload {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.summary-hero-visual .label-shell {
  top: 83%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

/* Keep the diagram centered and contained on small screens, including when
   reduced motion is enabled. Transforms here scale the diagram, not animate it. */
.summary-hero-visual {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 780px) {
  #summary .summary-hero-visual[data-reveal] {
    transform: scale(0.9);
  }
}

@media (max-width: 430px) {
  #summary .summary-hero-visual[data-reveal] {
    transform: scale(0.77);
  }
}