.map-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

.map-container-wrapper {
    background-image: url('state-label.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.map-container svg {
    width: 100%;
    height: auto;
    display: block;
}

.map-container g.region-group> :not(.region-outline) {
    opacity: 1;
    transition: opacity 0.4s ease;
}

.map-container g.region-group .label {
    opacity: 1;
    transition: opacity 0.4s ease;
}

@media (max-width: 767px) {
    .map-container g.region-group .label {
        opacity: 0;
    }
}

.map-container .region-group {
    cursor: pointer;
    transition: fill 0.6s cubic-bezier(.4, 0, .2, 1), stroke 0.6s cubic-bezier(.4, 0, .2, 1);
}

.map-container .region-outline {
    fill: #01CCB0;
    stroke: #333;
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
    will-change: fill, stroke;
    transition: fill 0.6s cubic-bezier(.4, 0, .2, 1), stroke 0.6s cubic-bezier(.4, 0, .2, 1);
}

.map-container .region-group:hover .region-outline {
    fill: #03b69c;
}

.map-container .map-outline {
    pointer-events: none;
    stroke: #888;
    stroke-width: 1.1;
    vector-effect: non-scaling-stroke;
    fill: none;
}

.map-container.fade-others .region-group:not(.is-active)> :not(.region-outline) {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

    .map-container .region-group,
    .map-container .region-outline {
        transition-duration: 0.01ms;
        transition-delay: 0s;
    }
}