*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#d9b2c2}
body{display:flex;justify-content:center;align-items:flex-start;font-family:Arial,Helvetica,sans-serif}
.microsite{position:relative;width:min(100vw,421px);aspect-ratio:421/795;overflow:hidden;background:#d9b2c2}
.design{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;left:22.6%;width:54.1%;height:4.9%;border-radius:14px;display:block;cursor:pointer}
.facebook{top:62.65%}
.instagram{top:68.55%}
.whatsapp{top:74.48%}
.hotspot:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (min-width:700px){
  body{padding:24px;background:#f4eef1}
  .microsite{box-shadow:0 20px 60px rgba(80,35,60,.18);border-radius:18px}
}