.img-comp-container {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  display: block;
}

/* First image wrapper (base image) */
.img-comp-img {
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* First image styles */
.img-comp-img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* Overlay-specific wrapper is absolutely positioned */
.img-comp-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 50%;
  height: 100%;
  border-right: 2px solid white; /* Optional: add a vertical line at the split */
}

/* Second image (in overlay) should be properly sized */
.img-comp-overlay img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  /* This is crucial: position the second image to match the view of the first */
  position: relative;
  right: 0;
  object-fit: cover;
}

/* Slider handle */
.img-comp-slider {
  position: absolute;
  z-index: 9;
  cursor: ew-resize;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  opacity: 0.7;
  border-radius: 50%;
  border: 1px solid #000;
  top: 50%;
  transform: translate(-50%, -50%); /* Center the slider on the dividing line */
}