.wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("bg.webp") top/cover no-repeat;
}

.app {
  display: block;
  width: 100%;
  height: 100vh;
  position: relative;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.wrapper.dark .overlay {
  opacity: 1;
}

.girl__container {
  position: absolute;
  z-index: 3;
  transition: 0.3s ease-in-out;
  filter: none;
}

.item:hover .girl__container {
  transform: scale(1.05);
}

.content {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  z-index: 2;
}

.logo {
  width: 49.5vw;
  height: 21.5vh;
  background: url("logo.webp") center / contain no-repeat;
  z-index: 5;
  position: absolute;
  left: 50%;
  top: 3%;
  transform: translate(-50%);
}

.item {
  position: relative;
  flex: 1;
}

.item1:hover .girl1 {
  background: url("girl1_a.webp") center / contain no-repeat;
  transform: scale(1.06);
  z-index: 5;
}

.item2:hover .girl2 {
  background: url("girl2_a.webp") center / contain no-repeat;
  transform: scale(1.06);
  z-index: 5;
}

.item3:hover .girl3 {
  background: url("girl3_a.webp") center / contain no-repeat;
  transform: scale(1.06);
  z-index: 5;
}

.item__decor1 {
  width: 9vw;
  height: 32vh;
  background: url("decor1.webp") center / contain no-repeat;
  position: absolute;
  top: 46%;
  left: 32%;
  z-index: 1;
}

.item__decor2 {
  width: 20vw;
  height: 35vh;
  background: url("decor2.webp") center / contain no-repeat;
  position: absolute;
  top: 53%;
  right: 0;
  z-index: 1;
}

.item__decor3 {
  width: 15vw;
  height: 35vh;
  background: url("decor3.webp") center / contain no-repeat;
  position: absolute;
  top: 41%;
  right: 19%;
  z-index: 1;
}

.girl1 {
  width: 24vw;
  height: 71vh;
  background: url("girl1.webp") center / contain no-repeat;
  position: absolute;
  bottom: 7%;
  left: 34%;
  z-index: 2;
  transition: 0.2s ease-in-out;
}

.girl2 {
  width: 24vw;
  height: 71vh;
  background: url("girl2.webp") center / contain no-repeat;
  position: absolute;
  bottom: 7%;
  left: 20%;
  z-index: 2;
  transition: 0.2s ease-in-out;
}

.girl3 {
  width: 24vw;
  height: 71vh;
  background: url("girl3.webp") center / contain no-repeat;
  position: absolute;
  bottom: 7%;
  left: 0;
  z-index: 2;
  transition: 0.2s ease-in-out;
}

.item__decor_clip {
  width: 5vw;
  height: 11vh;
  background: url("clip.webp") center / contain no-repeat;
  position: absolute;
  top: 42.6%;
  left: 39%;
  z-index: 3;
}

.girl__up_decor {
  width: 6vw;
  height: 20vh;
  background: url("plaster.webp") center / contain no-repeat;
  position: absolute;
  left: 57%;
  top: 21%;
  z-index: 3;
}

.girl__up_decor1 {
  width: 6vw;
  height: 20vh;
  background: url("plaster1.webp") center / contain no-repeat;
  position: absolute;
  right: 22%;
  top: 21%;
  z-index: 3;
}

.girl__up_decor2 {
  width: 6vw;
  height: 20vh;
  background: url("plaster3.webp") center / contain no-repeat;
  position: absolute;
  right: 49%;
  top: 19%;
  z-index: 3;
}

.girl__down_decor {
  width: 7vw;
  height: 8vh;
  background: url("plaster2.webp") center / contain no-repeat;
  position: absolute;
  bottom: 8%;
  right: 26%;
  z-index: 3;
}

@media (max-width: 2560px) and (max-height: 1440px) {
  .girl1 {
    width: 32vw;
    left: 15%;
    bottom: 11%;
  }

  .item__decor1 {
    width: 13vw;
    height: 37vh;
    left: 10%;
    top: 39%;
  }

  .item__decor_clip {
    top: 35.5%;
    left: 24%;
  }

  .girl__up_decor {
    width: 8vw;
    left: 53%;
    top: 16%;
  }

  .girl2 {
    width: 30vw;
    bottom: 5%;
    left: 11%;
  }

  .item__decor2 {
    width: 22vw;
    height: 37vh;
    right: -7%;
    top: 50%;
  }

  .girl__down_decor {
    width: 9vw;
    bottom: 8%;
    right: 21%;
  }

  .girl__up_decor1 {
    width: 8vw;
    right: 14%;
    top: 24%;
  }

  .girl3 {
    width: 30vw;
    bottom: 11%;
  }

  .item__decor3 {
    width: 17vw;
    right: 2%;
  }

  .girl__up_decor2 {
    width: 8vw;
    right: 35%;
    top: 16%;
  }
}

@media (max-width: 2560px) and (max-height: 1080px) {
  .girl1 {
    bottom: 8%;
  }

  .girl__up_decor {
    width: 6vw;
    top: 18%;
  }

  .item__decor1 {
    left: 18%;
  }

  .item__decor_clip {
    left: 31%;
  }

  .girl2 {
    left: 7%;
  }

  .girl__up_decor1 {
    width: 6vw;
    right: 23%;
    top: 23%;
  }

  .girl__down_decor {
    width: 7vw;
    bottom: 6%;
    right: 29%;
  }

  .item__decor2 {
    right: 1%;
  }

  .girl3 {
    bottom: 10%;
  }

  .girl__up_decor2 {
    width: 6vw;
    right: 40%;
  }

  .item__decor3 {
    right: 4%;
  }
}

@media (max-width: 2250px) {
  .item__decor_clip {
    left: 28%;
  }

  .item__decor1 {
    left: 14%;
  }

  .item__decor2 {
    right: -2%;
  }
}

@media (max-width: 2000px) {
  .girl__up_decor {
    width: 7vw;
    left: 51%;
  }

  .girl__up_decor1 {
    width: 7vw;
    right: 21%;
    top: 22%;
  }

  .girl__up_decor2 {
    width: 7vw;
    right: 37%;
  }

  .item__decor1 {
    left: 10%;
  }

  .item__decor_clip {
    left: 24%;
  }

  .item__decor2 {
    right: -3%;
  }

  .girl__down_decor {
    width: 8vw;
    bottom: 8%;
    right: 25%;
  }
}

@media (max-width: 1920px) {
  .girl1 {
    width: 35vw;
    height: 75vh;
    left: 5%;
  }

  .item__decor1 {
    left: 2%;
  }

  .item__decor_clip {
    left: 16%;
  }

  .girl__up_decor {
    width: 8vw;
    top: 15%;
    left: 59%;
    rotate: 80deg;
  }

  .girl2 {
    width: 35vw;
    height: 75vh;
    left: 1%;
    bottom: 3%;
  }

  .girl__up_decor1 {
    width: 8vw;
    right: 16%;
    top: 21%;
  }

  .girl__down_decor {
    width: 9vw;
    bottom: 5%;
    right: 20%;
  }

  .item__decor2 {
    right: -7%;
    top: 53%;
  }

  .girl3 {
    width: 35vw;
    height: 75%;
    left: -9%;
  }

  .girl__up_decor2 {
    width: 8vw;
    top: 13%;
    right: 57%;
  }

  .item__decor3 {
    right: 2%;
    top: 37%;
  }
}

@media (max-width: 1440px) {
  .girl2 {
    bottom: 6%;
  }

  .girl__up_decor1 {
    top: 18%;
  }

  .girl__down_decor {
    bottom: 8%;
  }

  .item__decor2 {
    top: 49%;
  }

  .item__decor1 {
    left: 3%;
  }
}

@media (max-height: 749px) {
  .item__decor1 {
    left: 6%;
  }
}