html, body {
  margin: 0;
  min-height: 100%;
  background: #000;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.stage {
  width: 100%;
}
.hero {
  position: relative;
  width: 100%;
  max-width: 1386px;
  margin: 0 auto;
}
.hero img {
  display: block;
  width: 100%;
  height: auto;
}
.hotspot {
  position: absolute;
  display: block;
  z-index: 2;
  /* Uncomment temporarily while positioning: outline: 2px solid red; */
}
/* Percentage coordinates keep the links aligned as the image responsively scales. */
.crossroads { left: 15%; top: 58%; width: 23%; height: 17%; }
.speed      { left: 39%; top: 58%; width: 22%; height: 17%; }
.time       { left: 63%; top: 58%; width: 22%; height: 17%; }