.map{ /* Main container for the map and the list */
    overflow: hidden; /* Handles floating of child elements */
}

.map__image{ /* Container for the SVG map image */
    width: 50%; /* Takes half of the width */
    max-width: 800px; /* Maximum width */
    float: left; /* Aligns to the left */
}

.map__image path{ /* Style for SVG map regions */
    fill: #83bbea; /* Default fill color */
    stroke: transparent; /* Transparent border */
    stroke-width: 2px; /* Border thickness */
    transition: fill 0.3s; /* Animation when color changes */
}

.map__image .is-active path{ /* Active region on the map */
    fill: #2e7cbb; /* Hover or selected color */
    cursor: pointer; /* Pointer cursor */
}

.map__list{ /* List of items associated with the map */
    width: 50%; /* Takes the other half of the width */
    float: right; /* Aligns to the right */
    list-style: none; /* Removes bullets */
    padding: 0; /* Removes default padding */
}

.map__list a{ /* Links in the list */
    color: inherit;         /* Inherit only color from parent */
    text-decoration: none; /* Removes underline */
    transition: color 0.3s; /* Animation when color changes */
    font-family: unset;     /* Do not inherit font-family */
}

.map__list a.is-active{ /* Active link in the list */
    color: #1b4b6d; /* Active link color */
    font-weight: bold; /* Bold text */
    text-decoration: underline; /* Underlines the active link */
}