.leaves {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.rain-image {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  justify-content: center;
}

.leave-main {
  position: relative;
  height: 177px;
  overflow: hidden;
  width: 68%;
}

.leave-main > div {
  position: absolute;
}

/* .layer1 {
    background-color: red;
  }
  
  .layer2 {
    background-color: blue;
  } */

.layer1.leaf-1 {
  top: -34%;
  width: 30px;
}

.leave-main > div > div {
  max-width: 100%;
}
.layer1.leaf-3 {
  top: -16%;
  left: 23%;
  width: 40px;
}
.leave-main > div > img {
  max-width: 100%;
}

.layer1.leaf-2 {
  top: -37%;
  left: 15%;
  width: 40px;
}
.layer1.leaf-4 {
  top: -16%;
  left: 23%;
  width: 40px;
}
.layer1.leaf-5 {
  width: 30px;
  top: -34%;
  left: 27%;
}
.layer1.leaf-6 {
  top: -13%;
  left: 28%;
  width: 35px;
}
.layer1.leaf-7 {
  top: -19%;
  left: 33%;
  width: 25px;
}
.layer1.leaf-8 {
  top: -14%;
  left: 35%;
  width: 33px;
}
.layer1.leaf-9 {
  top: -49%;
  left: 35%;
  width: 33px;
}
.layer1.leaf-10 {
  top: -21%;
  left: 39%;
  width: 38px;
}
.layer1.leaf-11 {
  top: -35%;
  left: 46%;
  width: 24px;
}
.layer1.leaf-12 {
  top: -28%;
  left: 51%;
  width: 30px;
}
.layer1.leaf-13 {
  top: -41%;
  left: 51%;
  width: 38px;
}
.layer1.leaf-14 {
  top: -23%;
  left: 59%;
  width: 37px;
}
.layer1.leaf-16 {
  top: -14%;
  left: 63%;
  width: 40px;
}
.layer1.leaf-15 {
  top: -40%;
  left: 58%;
  width: 40px;
}
.layer1.leaf-17 {
  top: -40%;
  left: 70%;
  width: 40px;
}
.layer1.leaf-18 {
  top: -48%;
  left: 74%;
  width: 30px;
}
.layer1.leaf-19 {
  top: -26%;
  left: 75%;
  width: 32px;
}
.layer1.leaf-20 {
  top: -43%;
  left: 79%;
  width: 29px;
}

.layer1.leaf-21 {
  top: -12%;
  left: 83%;
  width: 33px;
}
.layer1.leaf-22 {
  top: -27%;
  left: 86%;
  width: 37px;
}

.layer1.leaf-23 {
  top: -47%;
  left: 93%;
  width: 28px;
}

.layer2.leaf-1 {
  top: -61%;
  left: 3%;
  width: 32px;
}
.layer2.leaf-2 {
  left: 12%;
  top: -66%;
  width: 38px;
}
.layer2.leaf-3 {
  top: -57%;
  left: 19%;
  width: 28px;
}
.layer2.leaf-4 {
  top: -70%;
  left: 23%;
  width: 28px;
}
.layer2.leaf-5 {
  top: -80%;
  left: 27%;
  width: 32px;
}
.layer2.leaf-6 {
  top: -65%;
  left: 31%;
  width: 40px;
}
.layer2.leaf-7 {
  top: -59%;
  left: 38%;
  width: 41px;
}
.layer2.leaf-8 {
  top: -84%;
  left: 35%;
  width: 41px;
}
.layer2.leaf-9 {
  top: -75%;
  left: 42%;
  width: 30px;
}
.leaf-10 {
  top: -56%;
  left: 47%;
  width: 39px;
}
.layer2.leaf-11 {
  top: -66%;
  left: 59%;
  width: 34px;
}
.layer2.leaf-12 {
  top: -78%;
  left: 62%;
  width: 32px;
}
.layer2.leaf-13 {
  top: -52%;
  left: 66%;
  width: 30px;
}
.layer2.leaf-14 {
  top: -62%;
  left: 70%;
  width: 38px;
}
.layer2.leaf-15 {
  top: -62%;
  left: 70%;
  width: 38px;
}
.layer2.leaf-16 {
  top: -71%;
  left: 77%;
  width: 41px;
}
.layer2.leaf-17 {
  top: -54%;
  left: 83%;
  width: 31px;
}
.leaf-18 {
  top: -29%;
  left: 67%;
  width: 31px;
}
.layer2.leaf-19 {
  top: -48%;
  left: 29%;
  width: 31px;
}
.layer2.leaf-20 {
  top: -81%;
  left: 15%;
  width: 40px;
}

.layer2.leaf-21 {
  left: 42%;
  top: -44%;
  width: 28px;
}
.layer2.leaf-22 {
  left: 54%;
  top: -84%;
  width: 39px;
}
.layer2.leaf-23 {
  left: 97%;
  top: -35%;
  width: 27px;
}

.layer1 {
  animation: slideDown 1s linear infinite;
  transform: translateY(-50%);
  transition: 0.33s;
}

.layer2 {
  animation: slideDown 1s linear 1;
  transform: translateY(-50%);
  transition: 0.33s;
}

@keyframes slideDown {
  0% {
    transform: translate(-5%, -50%);
    rotate: -2deg;
  }
  25% {
    transform: translate(5%, -50%);
    rotate: 2deg;
  }
  50% {
    transform: translate(-5%, -50%);
    rotate: -2deg;
  }
  100% {
    transform: translate(5%, -50%);
    rotate: 2deg;
    top: 100%;
  }
}

@media (max-width: 991px) {
  .leave-main > div {
    scale: 0.6;
  }

  .leave-main > div > img {
    scale: 0.6;
    background-image: url("https://media.barsys.com/assets/leaf-aotumn.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .layer1 {
    animation: slideDown 1.5s linear 1;
    transition: 0.33s;
  }

  .layer2 {
    animation: slideDown 1.5s linear 1;
    transition: 0.33s;
  }
}