.page-wrapper {
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  width: 100%;
  margin: 0;
}
.main-inner {
  width: 1400px;
  overflow: hidden;
  margin: 0 auto;
}
.heading {
  display: none;
}
.main-title {
  width: 601px;
  margin: auto;
  margin-top: 40px;
  color: var(--navy);
  text-align: center;
}
.map {
  position: relative;
  margin: 70px 0 149px 0;
}
.map img {
  width: 139px;
  height: 205px;
}
.map-img {
  width: 1400px;
  height: 912px;
  background-image: url("../assets/icons/map.svg");
  padding-bottom: 3px;
  padding-right: 5px;
}
.panda-location {
  position: absolute;
  left: 66%;
  top: 34%;
}
.lemur-location {
  position: absolute;
  left: 54.8%;
  top: 61%;
}
.gorilla-location {
  position: absolute;
  left: 47.4%;
  top: 48%;
}
.eagles-location {
  position: absolute;
  left: 9.9%;
  top: 38.6%;
}
.crocodile-location {
  position: absolute;
  left: 18.8%;
  top: 40.2%;
}
.lion-location {
  position: absolute;
  left: 39.2%;
  top: 45.4%;
}
.tiger-location {
  position: absolute;
  left: 70.5%;
  top: 51.3%;
}
.koala-location {
  position: absolute;
  left: 79.9%;
  top: 63.8%;
}
.flag:hover {
  cursor: pointer;
}

/* M E D I A */

@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .main-inner {
    max-width: 1200px;
  }
  .main-title {
    margin-top: 30px;
  }
  .map {
    margin: 16px 0 100px 0;
  }
  .map-img {
    width: 1198px;
    height: 777px;
    background-image: url("../assets/icons/1200-map.svg");
  }
  .panda-location {
    position: absolute;
    left: 69.5%;
    top: 27.8%;
  }
  .lemur-location {
    position: absolute;
    left: 54.5%;
    top: 58%;
  }
  .gorilla-location {
    position: absolute;
    left: 46.9%;
    top: 45%;
  }
  .eagles-location {
    position: absolute;
    left: 8.9%;
    top: 35.2%;
  }
  .crocodile-location {
    position: absolute;
    left: 18.8%;
    top: 38%;
  }
  .lion-location {
    position: absolute;
    left: 38.5%;
    top: 41.2%;
  }
  .tiger-location {
    position: absolute;
    left: 69.7%;
    top: 49.8%;
  }
  .koala-location {
    position: absolute;
    left: 79.1%;
    top: 60.8%;
  }
}

@media screen and (min-width: 640px) and (max-width: 1199px) {
  .page-wrapper {
    height: 100vh;
    overflow: auto;
  }
  .main-inner {
    max-width: 640px;
  }
  .map {
    margin-bottom: 98px;
  }
  .map-img {
    margin-top: 67px;
    width: 640px;
    height: 415px;
    background-image: url("../assets/icons/640-map.svg");
  }
  .main-title {
    margin-top: 30px;
    font-size: 42px;
  }
  .map img {
    width: 60px;
    height: 75px;
  }
  .panda-location {
    position: absolute;
    left: 70.8%;
    top: 33.2%;
  }
  .lemur-location {
    position: absolute;
    left: 55.2%;
    top: 62.1%;
  }
  .gorilla-location {
    position: absolute;
    left: 47.6%;
    top: 48.8%;
  }
  .eagles-location {
    position: absolute;
    left: 9.9%;
    top: 37.6%;
  }
  .crocodile-location {
    position: absolute;
    left: 19.5%;
    top: 41.2%;
  }
  .lion-location {
    position: absolute;
    left: 40.2%;
    top: 46.4%;
  }
  .tiger-location {
    position: absolute;
    left: 71%;
    top: 54.8%;
  }
  .koala-location {
    position: absolute;
    left: 78.5%;
    top: 64.1%;
  }
}

@media screen and (min-width: 320px) and (max-width: 639px) {
  .page-wrapper {
    height: 100vh;
    overflow: auto;
  }
  .main-inner {
    max-width: 320px;
  }
  .main-title {
    width: 300px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    text-transform: none;
    font-size: 26px;
  }
  .map-img {
    width: 320px;
    height: 234px;
    margin: 0;
    background-image: url("../assets/icons/320-map.svg");
  }
  .map {
    margin: 22px 0 53px 0;
  }
  .map img {
    width: 46px;
    height: 61px;
  }
  .panda-location {
    position: absolute;
    left: 67.4%;
    top: 29.6%;
  }
  .lemur-location {
    position: absolute;
    left: 54.5%;
    top: 56.5%;
  }
  .gorilla-location {
    position: absolute;
    left: 46.3%;
    top: 47.2%;
  }
  .eagles-location {
    position: absolute;
    left: 2.8%;
    top: 29%;
  }
  .crocodile-location {
    position: absolute;
    left: 15%;
    top: 37%;
  }
  .lion-location {
    position: absolute;
    left: 37.8%;
    top: 38.4%;
  }
  .tiger-location {
    position: absolute;
    left: 73.2%;
    top: 48.6%;
  }
  .koala-location {
    position: absolute;
    left: 81.5%;
    top: 60.2%;
  }
}