.world-map-country {
    position: absolute;
    display: block;
    background-color: var(  --color-map-visited);

    mask: var(--map-image) center / contain no-repeat;
    -webkit-mask: var(--map-image) center / contain no-repeat;

    transform-origin: center;
    transition: background-color 180ms ease, transform 150ms ease;
}

.world-map-country:hover,
.world-map-country:focus-visible {
    background-color: var(--color-icon-hover);
    transform: translateY(-2px);
}

.world-map-country:not([href]) {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .world-map-country {
        transition: none;
    }
}

#us {
    left: -0.0551%;
    top: 6.7045%;
    width: min(100%*432/1816, 432px);
    aspect-ratio: 24 / 19;
}

#mx {
    left: 6.8833%;
    top: 33.9773%;
    width: min(100%*150/1816, 150px);
    aspect-ratio: 25 / 19;
}

#bo {
    left: 20.4295%;
    top: 66.0227%;
    width: min(100%*72/1816, 72px);
    aspect-ratio: 6 / 7;
}

#br {
    left: 18.7775%;
    top: 55.1136%;
    width: min(100%*228/1816, 228px);
    aspect-ratio: 38 / 43;
}


#cl {
    left: 20.4295%;
    top: 72.1591%;
    width: min(100%*78/1816, 78px);
    aspect-ratio: 13 / 41;
}

#co {
    left: 17.1256%;
    top: 49.6591%;
    width: min(100%*66/1816, 66px);
    aspect-ratio: 11 / 16;
}

#cr {
    left: 15.1432%;
    top: 50.3409%;
    width: min(100%*18/1816, 18px);
    aspect-ratio: 1 / 1;
}

#gr {
    left: 48.8436%;
    top: 27.1591%;
    width: min(100%*36/1816, 36px);
    aspect-ratio: 3 / 4;
}

#in {
    left: 64.3722%;
    top: 30.5682%;
    width: min(100%*156/1816, 156px);
    aspect-ratio: 78 / 107;
}

#is {
    left: 37.6652%;
    top: 9.4318%;
    width: min(100%*48/1816, 48px);
    aspect-ratio: 8 / 3;
}

#kh {
    left: 75.6057%;
    top: 47.6136%;
    width: min(100%*30/1816, 30px);
    aspect-ratio: 1 / 1;
}

#lk {
    left: 68.3370%;
    top: 51.7045%;
    width: min(100%*12/1816, 12px);
    aspect-ratio: 1 / 2;
}

#my {
    left: 74.9449%;
    top: 53.0682%;
    width: min(100%*114/1816, 114px);
    aspect-ratio: 19 / 7;
}

#pe {
    left: 16.4648%;
    top: 59.2045%;
    width: min(100%*78/1816, 78px);
    aspect-ratio: 13 / 19;
}

#sg {
    left: 75.9361%;
    top: 57.1591%;
    width: min(100%*6/1816, 6px);
    aspect-ratio: 1 / 1;
}

#tr {
    left: 50.8260%;
    top: 27.1591%;
    width: min(100%*96/1816, 96px);
    aspect-ratio: 16 / 7;
}

#vn {
    left: 74.9449%;
    top: 41.4773%;
    width: min(100%*48/1816, 48px);
    aspect-ratio: 1 / 2;
}

#jp {
    left: 82.5441%;
    top: 24.4318%;
    width: min(100%*54/1816, 54px);
    aspect-ratio: 9 / 16;
}

@media (max-width: 900px) {
    #us { width: 23.7885%; }
    #mx { width: 8.2599%; }
    #bo { width: 3.9648%; }
    #br { width: 12.5551%; }
    #cl { width: 4.2952%; }
    #co { width: 3.6344%; }
    #cr { width: 0.9912%; }
    #gr { width: 1.9824%; }
    #in { width: 8.5903%; }
    #is { width: 2.6432%; }
    #kh { width: 1.6520%; }
    #lk { width: 0.6608%; }
    #my { width: 6.2775%; }
    #pe { width: 4.2952%; }
    #sg { width: 0.3304%; }
    #tr { width: 5.2863%; }
    #vn { width: 2.6432%; }
    #jp { width: 2.9736%; }
}