.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 90;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 116, 139, 0.2);
  cursor: pointer;
}

.network-modal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 340px;
  max-width: 30rem;
  overflow-y: auto;
  padding: 24px;
  transform: translateX(-100%);
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
  z-index: 100;
}

.network.is-active .network-modal {
  transform: translateX(0);
}
.network.is-active .overlay {
  display: block;
}

.network-infos h2 {
  margin-top: 0;
  font-size: var(--fs-large);
  line-height: calc(var(--fs-large) * 1.1);
  font-weight: 700;
  color: var(--clr-blue-600);
}

.btn-overlay {
  position: absolute;
  right: 10px;
  top: 10px;
  fill: #25456d;
}

.world .region {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  cursor: pointer;
}
.world.is-active .region:not(.is-active) {
  opacity: 0.3;
}