.main {
  position: relative;
  margin-top: 10vh;
}

.shape-box {
  width: 100%;
  height: 100dvh;

  padding-top: 1rem;

  position: relative;
  z-index: -999;
}

.shape-box .point-left {
  width: 100%;
  height: 40%;

  border-top-right-radius: 7rem;
  border-bottom-left-radius: 7rem;

  background-color: var(--dp);

  position: absolute;
  
}

.shape-box .point-right {
  width: 100%;
  height: 40%;

  background-color: var(--lb);
  border: 10px solid var(--lb);

  border-top-left-radius: 7rem;
  border-bottom-right-radius: 7rem;

  top: 2.5rem;
  left: 0.5rem;
  z-index: 2;

  position: absolute;
  overflow: hidden;

  img {
    overflow: hidden;
  }
}




/* small mobile */
/* @media (min-width: 320px) {
 
} */

/* m mobile */
@media (min-width: 375px) {
}

/* l mobile */
@media (min-width: 425px) {
 .shape-box .point-left {
  height: 60%;

  border-top-right-radius: 10rem;
  border-bottom-left-radius: 10rem;
 }

 .shape-box .point-right {
  height: 60%;

  border-top-left-radius: 10rem;
  border-bottom-right-radius: 10rem;
 }

 
}

/* xs */
/* @media (min-width: 475px) {

} */

/* sm */
@media (min-width: 640px) {
  .shape-box .point-left {
    height: 65%;
    width: 80%;

    
  
    border-top-right-radius: 13rem;
    border-bottom-left-radius: 13rem;
   }
  
   .shape-box .point-right {
    height: 65%;
    width: 80%;

    left: 2rem;
  
    border-top-left-radius: 13rem;
    border-bottom-right-radius: 13rem;

    img {
      translate: 0 0;
    }
   }
}

/* m */
@media (min-width: 768px) {
  .main {
    margin-top: 15vh;
  }

  .shape-box .point-left {
    height: 65%;
    width: 60%;

    
  
    border-top-right-radius: 13rem;
    border-bottom-left-radius: 13rem;
   }
  
   .shape-box .point-right {
    height: 65%;
    width: 60%;

    left: 2rem;
  
    border-top-left-radius: 13rem;
    border-bottom-right-radius: 13rem;

    
   }
}

/* lg */
@media (min-width: 1024px) {
  .shape-box .point-left {
    height: 65%;
    width: 50%;

    
  
    border-top-right-radius: 13rem;
    border-bottom-left-radius: 13rem;
   }
  
   .shape-box .point-right {
    height: 65%;
    width: 50%;

    left: 2rem;
  
    border-top-left-radius: 13rem;
    border-bottom-right-radius: 13rem;

    img {
      translate: 0 -20%;
    }
   }

   
}

/* xl */
/* @media (min-width: 1280px) {
 
} */

/* 2xl */
/* @media (min-width: 1536px) {

} */