html,body{height:100%}
body{margin:0;background:#0a2f6b;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wrap{min-height:100%;display:grid;place-items:center;padding:16px}

.hero{
  position:relative;
  width:min(1200px, 96vw);
  aspect-ratio: 1536 / 878;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  border-radius: 10px;
  overflow:hidden;
  background:#0b3f8e;
}
.hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none; /* IMPORTANT: let clicks pass to hotspots */
}

/* Hotspots always above */
.hot{
  position:absolute;
  display:block;
  z-index:3;
  /* background: rgba(255,0,0,.18); */ /* uncomment to debug click areas */
}

@media (max-width:520px){
  .wrap{padding:8px}
  .hero{border-radius:8px}
}