.map-point-card {
    border-radius: 35px;
    height: 12px;
    width: 12px;
    z-index: 1;
}

.map-point-card,
.map-point-card__title {
    background: var(--main-bg);
    position: absolute
}

.map-point-card__title {
    border-radius: 46px;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 11px;
    left: 19px;
    padding: var(--space-xxs);
    top: 50%;
    transform: translateY(-50%);
    transition: all .2s ease-in;
    white-space: nowrap
}

@media(min-width:768px) {
    .map-point-card__title {
        font-size: 14px;
        left: 20px
    }
}

.map-point-card__title:hover,
.map-point-card_accent .map-point-card__title {
    background: var(--graphic-main);
    color: var(--main-color)
}

.map-point-card_orenburg {
    z-index: 1;
    left: 23%;
    top: 72%;
}
@media (min-width: 768px) {
    .map-point-card_orenburg {
        left: clamp(23%, calc(23% + 5% * (100vw - 768px) / 242px), 28%);
        /* top: clamp(42%, calc(44% - 2% * (100vw - 768px)/242px), 44%); */
    }
}

@media (min-width: 1010px) {
    .map-point-card_orenburg {
        left: clamp(28%, calc(28% + 3% * (100vw - 1010px) / 270px), 31%);
        top: 72%;
    }
}

@media (min-width: 1280px) {
    .map-point-card_orenburg {
        left: 31%;
        top: 73%;
    }
}
@media (min-width: 1440px) {
    .map-point-card_orenburg {
        left: 31%;
        top: clamp(73%, calc(73% + 8% * (100vw - 1440px) / 480px), 81%);
    }
}

@media (min-width: 1920px) {
    .map-point-card_orenburg {
        left: 31%;
        top: 81%;
    }
}
@media (min-width: 2300px) {
    .map-point-card_orenburg {
        left: 31%;
        top: 90%;
    }
}

.map-point-card_buzuluk {
    left: 18%;
    top: 67%;
}

@media (min-width: 768px) {
    .map-point-card_buzuluk {
        left: clamp(18%, calc(18% + 7% * (100vw - 768px) / 242px), 25%);
    }
}

@media (min-width: 1010px) {
    .map-point-card_buzuluk {
        left: clamp(25%, calc(25% + 4% * (100vw - 1010px) / 270px), 29%);
    }
}

@media (min-width: 1280px) {
    .map-point-card_buzuluk {
        top: 68%;
    }
}

@media (min-width: 1440px) {
    .map-point-card_buzuluk {
        top: clamp(68%, calc(68% + 8% * (100vw - 1440px) / 480px), 76%);
    }
}

@media (min-width: 1920px) {
    .map-point-card_buzuluk {
        top: 74%;
    }
}
.map-point-card_samara {
    left: 15%;
    top: 62%;
}

@media (min-width: 768px) {
    .map-point-card_samara {
        left: clamp(13.3%, calc(13.3% + 10% * (100vw - 768px) / 242px), 23.3%);
    }
}

@media (min-width: 1010px) {
    .map-point-card_samara {
        left: clamp(22.3%, calc(22.3% + 4% * (100vw - 1010px) / 270px), 26.3%);
    }
}

@media (min-width: 1280px) {
    .map-point-card_samara {
        top: 63%;
    }
}

@media (min-width: 1440px) {
    .map-point-card_samara {
        top: clamp(63%, calc(63% + 8% * (100vw - 1440px) / 480px), 71%);
    }
}

.map-point-card_moscow {
    left: 7%;
    top: 48%;
}

@media (min-width: 768px) {
    .map-point-card_moscow {
        left: clamp(4%, calc(4% + 10% * (100vw - 768px) / 242px), 17%);
    }
}

@media (min-width: 1010px) {
    .map-point-card_moscow {
        left: clamp(14%, calc(14% + 7% * (100vw - 1010px) / 270px), 19%);
    }
}

@media (min-width: 1280px) {
    .map-point-card_moscow {
        left: 19%;
        top: 48%;
    }
}

.map-point-card_pytyah {
    left: 31%;
    top: 52%;
}

@media (min-width: 768px) {
    .map-point-card_pytyah {
        left: clamp(37%, calc(37% + 6% * (100vw - 768px) / 242px), 43%);
    }
}

@media (min-width: 1010px) {
    .map-point-card_pytyah {
        left: clamp(43%, calc(43% + 2% * (100vw - 1010px) / 270px), 45%);
    }
}

@media (min-width: 1280px) {
    .map-point-card_pytyah {
        left: 45%;
        top: 53%;
    }
}

@media (min-width: 1440px) {
    .map-point-card_pytyah {
        top: 53%;
    }
}

@media (min-width: 1920px) {
    .map-point-card_pytyah {
        top: 55%;
    }
}

.map-point-card_nyagan {
    left: 31%;
    top: 46%;
}

@media (min-width: 768px) {
    .map-point-card_nyagan {
        left: clamp(37%, calc(37% + 6% * (100vw - 768px) / 242px), 43%);
    }
}

@media (min-width: 1010px) {
    .map-point-card_nyagan {
        left: clamp(43%, calc(43% + 2% * (100vw - 1010px) / 270px), 45%);
    }
}

@media (min-width: 1280px) {
    .map-point-card_nyagan {
        left: 45%;
        top: 46%;
    }
}

@media (min-width: 1440px) {
    .map-point-card_nyagan {
        top: 46%;
    }
}

@media (min-width: 1920px) {
    .map-point-card_nyagan {
        top: 45%;
    }
}

.map-point-card_usinsk {
    left: 26%;
    top: 39%;
}

@media (min-width: 768px) {
    .map-point-card_usinsk {
        left: clamp(30%, calc(30% + 8% * (100vw - 768px) / 242px), 38%);
    }
}

@media (min-width: 1010px) {
    .map-point-card_usinsk {
        left: clamp(38%, calc(38% + 4% * (100vw - 1010px) / 270px), 42%);
    }
}

@media (min-width: 1280px) {
    .map-point-card_usinsk {
        left: 43%;
        top: clamp(37%, calc(39% - 2% * (100vw - 1280px) / 640px), 39%);
    }
}

@media (min-width: 1920px) {
    .map-point-card_usinsk {
        top: 37%;
    }
}

@media (min-width: 2100px) {
    .map-point-card_usinsk {
        top: 36%;
    }
}

.map-point-card_muravlenko {
    left: 44%;
    top: 43%;
}

@media (min-width: 768px) {
    .map-point-card_muravlenko {
        left: 57%;
    }
}

@media (min-width: 1010px) {
    .map-point-card_muravlenko {
        left: 55%;
    }
}

@media (min-width: 1280px) {
    .map-point-card_muravlenko {
        top: 42%;
    }
}

@media (min-width: 1920px) {
    .map-point-card_muravlenko {
        top: 41%;
    }
}

.map-point-card_noyabrsk {
    left: 42%;
    top: 47%;
}

@media (min-width: 768px) {
    .map-point-card_noyabrsk {
        left: 55%;
    }
}

@media (min-width: 1010px) {
    .map-point-card_noyabrsk {
        left: 53%;
    }
}

@media (min-width: 1280px) {
    .map-point-card_noyabrsk {
        top: 46%;
    }
}

@media (min-width: 1920px) {
    .map-point-card_noyabrsk {
        top: 45%;
    }
}

.map-point-card_kogalim {
    left: 50%;
    top: 49%;
}

@media (min-width: 768px) {
    .map-point-card_kogalim {
        left: 59%;
    }
}

@media (min-width: 1010px) {
    .map-point-card_kogalim {
        left: 57%;
    }
}

.map-point-card_hanty {
    left: 43%;
    top: 55%;
}

@media (min-width: 768px) {
    .map-point-card_hanty {
        left: 56%;
    }
}

@media (min-width: 1010px) {
    .map-point-card_hanty {
        left: 54%;
    }
}

@media (min-width: 1280px) {
    .map-point-card_hanty {
        top: 54%;
    }
}

@media (min-width: 1920px) {
    .map-point-card_hanty {
        top: 53%;
    }
}

.map-point-card_nizhnevartovsk {
    left: 60%;
    top: 59%;
}

@media (min-width: 768px) {
    .map-point-card_nizhnevartovsk {
        left: clamp(68%, calc(73% - 5% * (100vw - 768px) / 242px), 73%);
    }
}

@media (min-width: 1010px) {
    .map-point-card_nizhnevartovsk {
        left: clamp(65%, calc(68% - 3% * (100vw - 1010px) / 270px), 68%);
    }
}

@media (min-width: 1280px) {
    .map-point-card_nizhnevartovsk {
        left: 65%;
    }
}

@media (min-width: 1920px) {
    .map-point-card_nizhnevartovsk {
        top: 63%;
    }
}

.map-point-card_kopeisk {
    left: 29%;
    top: 58%;
}

@media (min-width: 768px) {
    .map-point-card_kopeisk {
        left: clamp(31%, calc(31% + 6% * (100vw - 768px) / 242px), 37%);
    }
}

@media (min-width: 1010px) {
    .map-point-card_kopeisk {
        left: clamp(35%, calc(35% + 5% * (100vw - 1010px) / 270px), 40%);
    }
}

@media (min-width: 1280px) {
    .map-point-card_kopeisk {
        left: 40%;
    }
}

@media (min-width: 1440px) {
    .map-point-card_kopeisk {
        left: 41%;
    }
}

@media (min-width: 1920px) {
    .map-point-card_kopeisk {
        top: 62%;
    }
}

.title-enter-active,
.title-leave-active {
    transition: all .2s ease-in-out
}

.title-enter-from {
    opacity: 0;
    transform: translateY(-50%) scale(.9)
}

.title-enter-to,
.title-leave-from {
    opacity: 1;
    transform: translateY(-50%) scale(1)
}

.title-leave-to {
    opacity: 0;
    transform: translateY(-50%) scale(.9)
}

.map-point-overlay {
    background: #00000080;
    inset: 0;
    position: fixed;
    z-index: 302
}

.map-point-overlay_visible {
    opacity: 1;
    pointer-events: auto
}

.overlay-enter-active,
.overlay-leave-active {
    transition: opacity .3s ease-in-out
}

.overlay-enter-from,
.overlay-leave-to {
    opacity: 0
}

.overlay-enter-to,
.overlay-leave-from {
    opacity: 1
}