.hero-dots_item {
    opacity: 1;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

#hero-dots-wrap:has(.hero-dots_item:hover) .hero-dots_item:not(:hover) {
    opacity: 0.4;
}

.hero-dots-hover-bl {
    top: auto;
    bottom: 100%;
    margin-bottom: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity 0.4s ease,
        visibility 0.4s ease,
        transform 0.4s ease;
}

.hero-dots_item:hover {
    z-index: 10;
    transform: scale(1.2);
}








.hero-dots_item:hover .hero-dots-hover-bl {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 991px) {
    .hero-dots-hover-bl {
        left: 0;
        transform: translate(var(--popup-shift-x, 0px), -8px);
    }
    .hero-dots-load.is-tapped .hero-dots_item {
        z-index: 10;
        transform: scale(1.2);
    }
    .hero-dots-load.is-tapped .hero-dots-hover-bl {
        opacity: 1;
        visibility: visible;
        transform: translate(var(--popup-shift-x, 0px), 0);
    }
}