.wba-regions { display: flex; width: 100%; align-items: stretch; color: #3c3834; }
.wba-regions__map { position: relative; flex: 0 0 60%; min-width: 0; align-self: flex-start; }
.wba-regions__map img { display: block; width: 100%; height: auto; }
.wba-regions__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.wba-regions__hotspot { fill: transparent; stroke: transparent; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: all; cursor: pointer; transition: fill .15s ease, stroke .15s ease; }
.wba-regions__hotspot:hover, .wba-regions__button:focus-visible, .wba-regions__link:focus-visible .wba-regions__hotspot, .wba-regions__hotspot.is-active { fill: #0077c8; fill-opacity: .61; stroke: #0077c8; stroke-opacity: .81; }
.wba-regions__button:focus-visible, .wba-regions__link:focus-visible .wba-regions__hotspot { outline: none; stroke-width: 3; }
.wba-regions__aside { box-sizing: border-box; flex: 1 1 40%; min-width: 0; background: #eee; padding: 34px 38px; font-size: 18px; line-height: 1.55; overflow-wrap: break-word; }
.wba-regions__intro[hidden], .wba-regions__panel[hidden] { display: none; }
.wba-regions__panel h2 { color: #3c3834; margin: 0 0 24px; font-size: 36px; line-height: 1.2; }
.wba-regions__panel h5 { color: #3c3834; margin: 20px 0 8px; font-size: 18px; line-height: 1.3; }
.wba-regions__panel ul { margin: 0 0 14px; padding-left: 38px; }
.wba-regions__panel li { margin: 0 0 7px; }
@media (max-width: 767px) {
    .wba-regions { display: block; }
    .wba-regions__aside { padding: 22px 24px; font-size: 16px; }
    .wba-regions__panel h2 { font-size: 28px; margin-bottom: 16px; }
    .wba-regions__panel h5 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .wba-regions__hotspot { transition: none; } }