.img-div {
	background-color: #000;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    height: 600px;
    width: 100vw;
}

image.before .img-div{
    background-position: left center;
}

image.after .img-div{
    background-position: right center;
}


  .image-ba {
    position: relative;
    display: block;
  }
  
  .image-ba::after{
    content: '';
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, #000,  transparent);   
    }

  .image-ba * {
    -webkit-user-select: none;
    display: block;
  }
  
  .image.before {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: calc(50% + 2px);
    height: 100%;
    overflow: hidden;
  }
  
  .splitter {
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    cursor: col-resize;
    z-index: 3;
  }


.handle-line{
    position: absolute;
    height: 40px;
    bottom: 20%;
    left: 0px;
    width: 100%;
    z-index: 5;
}
  
.splitter-handle{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  top: 0px;
  left: calc(50vw - 20px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.splitter-handle .fa{
  font-size: 20px;
  color: #000;
}