.map-overlay__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.map-overlay__background img {
  height: 63.8rem;
}

.map-overlay__main-title {
  display: none;
}

.region-label {
  position: static;
  display: inline-block;
  color: var(--black);
  padding:var(--sm-4);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s;
  border:none;
}

.region-label:focus-visible{
outline: dashed 2px var(--black);
    outline-offset: 1px;
}

.region-label:hover{
color: var(--black)
}

.region-label[data-region="north-america"] {
  background: var(--theme-amber);
}
.region-label[data-region="latin-america-and-caribbean"] {
  background: var(--theme-green);
}
.region-label[data-region="africa"] {
  background: var(--theme-purple);
}
.region-label[data-region="europe"] {
  background: var(--theme-red);
}
.region-label[data-region="asia-pacific"] {
  background: var(--theme-purple);
}
.popover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 32rem;
  padding: var(--sm-2);
  flex-direction: column;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(1.2rem);
  display: none;
  border: none;
  width: 100%;
  max-height:58.7rem;
  overflow:auto;
}

.popover__header {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.popover__header .popover__close-btn {
  margin-left: auto;
   margin-top: -1.6rem;
  margin-right: -1.4rem;
  cursor:pointer;
}

.popover__close-btn:hover{
background-color:transparent;
color:var(--black);
}

.popover__intro {
  gap: 16px;
}

.popover__image{
border-radius:50%;
height:12rem;
width:12rem;
}

@media (max-width: 768px) {
  .map-overlay__content
    > .container-fluid
    > .row
    > .col-12
    > .map-overlay__region {
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    margin-left: -1.6rem;
    margin-right: -1.6rem;
    scrollbar-width: none;
    align-items: flex-end;
    min-height: 67.5rem;
  }
}

@media (min-width: 768px) and (max-width: 1200px){
  .map-overlay__content
    > .container-fluid
    > .row
    > .col-12
    > .map-overlay__region {    
        overflow-x: auto;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    margin-left: -4.8rem;
    margin-right: -4.8rem;
    scrollbar-width: none;
    align-items: flex-end;
    min-height: 67.5rem;
  }
}

@media (min-width: 1200px) {
  .map-overlay__background img {
    height: 84rem;
  }
  .map-overlay__content {
    min-height: 84rem;
  }
  
.map-overlay__main-title {
    display: block;
  }
  .region-label {
    position: absolute;
  }
  .region-label[data-region="north-america"] {
    top: 26%;
    left: 9%;
  }
  .region-label[data-region="latin-america-and-caribbean"] {
    top: 74%;
    left: 22%;
  }
  .region-label[data-region="africa"] {
    top: 58%;
    left: 52%;
  }
  .region-label[data-region="europe"] {
    top: 29%;
    left: 52%;
  }
  .region-label[data-region="asia-pacific"] {
    top: 48%;
    left: 75%;
  }
  .popover {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-height:62rem;
  }
}