.balloon-cluster {
position: relative;
max-width: 900px;
margin: clamp(80px, 20vh, 180px) auto 40px auto;
}
.balloon-cluster img {
width: 100%;
height: auto;
display: block;
}
.balloon-hotspot {
position: absolute;
z-index: 5;
display: block; /* 👈 IMPORTANT */
border-radius: 999px;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: transform 220ms ease, filter 220ms ease;
}
.balloon-hotspot span {
position: absolute; /* 👈 REQUIRED */
inset: 0; /* 👈 REQUIRED */
display: grid; /* 👈 REQUIRED */
place-items: center; /* 👈 REQUIRED */
font-weight: 800;
font-size: clamp(14px, 2vw, 22px);
letter-spacing: .08em;
text-transform: uppercase;
color: #111;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
pointer-events: none;
}
.balloon-hotspot:hover,
.balloon-hotspot:focus-visible {
transform: translateY(-12px) scale(1.03);
filter: drop-shadow(0 14px 18px rgba(0,0,0,.25));
outline: none;
}
