img-comparison-slider {
    visibility: hidden;
}
  
img-comparison-slider [slot='second'] {
    display: none;
}
  
img-comparison-slider.rendered {
    visibility: inherit;
}
  
img-comparison-slider.rendered [slot='second'] {
    display: unset;
}

.second {
    display: block;
    max-width:100%;
    max-height:80vh;
    width: auto;
    height: auto;
    line-height: normal;
    font-size: 100%;
    overflow: auto;
    margin: 0 0 0 0;
    border: 0 0 0 0;
}

.first {
    display: block;
    min-width:100%;
    min-height:100%;
    max-width:100%;
    max-height:100%;
    width: auto;
    height: auto;
    line-height: normal;
    font-size: 100%;
    overflow: auto;
    margin: 0 0 0 0;
    border: 0 0 0 0;
  
    --exposure: 0%;
    --transition-time: 0ms;
  
    transform: translateX(calc(var(--exposure) * 1));
    transition: transform var(--transition-time);
  
    .first-overlay-container {
      position: relative;
      transform: translateX(var(--exposure));
      transition: transform var(--transition-time);
      height: 100%;
    }
  
    .first-overlay {
      overflow: hidden;
      height: 100%;
    }
  }

img-comparison-slider {
    --divider-width: 3px;
    --divider-color: #c0c0c0;
    --divider-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    --default-handle-opacity: 1;
    --default-handle-width: 50px;
    --default-handle-color: #c0c0c0;
    --default-handle-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
}



  .before,
  .after {
    margin: 0;
  }

  .before figcaption,
  .after figcaption {
    background: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 12px;
    color: #2e3452;
    opacity: 0.8;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100%;
  }

  .before figcaption {
    left: 12px;
  }

  .after figcaption {
    right: 12px;
  }

  .custom-animated-handle {
    transition: transform 0.2s;
  }

  .slider-with-animated-handle:hover .custom-animated-handle {
    transform: scale(1.2);
  }