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;
}
img-comparison-slider{
  --default-handle-width: 100px;
  /*--default-handle-color: #F0F;*/
  --default-handle-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
  /*--divider-color: #F0F;*/
  --divider-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
}
.ics-wrapper *{
  margin:0;
  box-sizing: border-box;
  /* fix blurry downscaled images in chrome 96 */
  image-rendering: -webkit-optimize-contrast;
}
.ics-wrapper {
  /*max-width: 100%;*/
  width:  auto;
  height: auto;
  aspect-ratio: 9 / 6;
  position: relative;
  left:50%;
  /*top:50%;*/
  transform:translate(-50%, 0%);
  overflow:hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  /* firefox 92 issue images turning blue when drag slider */
  user-select: none;
}
@media (min-width: 900px) {
  .ics-wrapper {
    max-width: 900px;
    min-height: 600px;
  }
}
@media (min-width: 1200px) {
  .ics-wrapper {
    max-width: 1200px;
    min-height: 800px;
  }
}
@media (min-width: 1600px) {
  .ics-wrapper {
    max-width: 1500px;
    min-height: 1000px;
  }
}
[slot="second"] figcaption {
    right: 1em;
}
[slot="first"] figcaption {
    left: 1em;
}
[slot="second"] figcaption, [slot="first"] 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%;
}