.compare-slider{--compare-position:50%;aspect-ratio:4/5;border-radius:var(--pl-radius-editorial);isolation:isolate;margin:0;position:relative;overflow:hidden}.compare-slider__image,.compare-slider__image picture,.compare-slider__image img{block-size:100%;inline-size:100%}.compare-slider__image{position:absolute;inset:0}.compare-slider__image--before{clip-path:inset(0 calc(100% - var(--compare-position)) 0 0);z-index:1}.compare-slider__image picture,.compare-slider__image img{display:block}.compare-slider__image img{object-fit:cover}.compare-slider__label{border-radius:var(--pl-radius-control);color:var(--pl-paper);background:#393939b8;padding:.35em .65em;font-size:.8rem;position:absolute;top:.75rem}.compare-slider__label--before{left:.75rem}.compare-slider__label--after{right:.75rem}.compare-slider__divider{border-inline-start:.125rem solid var(--pl-paper);block-size:100%;left:var(--compare-position);pointer-events:none;z-index:2;position:absolute;top:0}.compare-slider__handle{background:var(--pl-paper);border:1px solid var(--pl-charcoal);block-size:2.75rem;color:var(--pl-charcoal);cursor:ew-resize;pointer-events:auto;touch-action:none;border-radius:50%;justify-content:center;align-items:center;inline-size:2.75rem;display:flex;position:absolute;top:50%;left:0;transform:translate(-50%,-50%);box-shadow:0 .2rem .6rem #00000040}.compare-slider__handle svg{inline-size:1.25rem}.compare-slider__range{appearance:none;opacity:0;pointer-events:none;z-index:3;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}.compare-slider:focus-within{outline:.18rem solid var(--pl-color-focus);outline-offset:.24rem}@media (width<=48rem){.compare-slider__image--before{clip-path:inset(calc(100% - var(--compare-position)) 0 0 0)}.compare-slider__label--before{top:auto;bottom:.75rem}.compare-slider__divider{border-block-start:.125rem solid var(--pl-paper);block-size:0;inline-size:100%;left:0;top:calc(100% - var(--compare-position));border-inline-start:0}.compare-slider__handle{cursor:ns-resize;top:0;left:50%}.compare-slider__handle svg{transform:rotate(-90deg)}.compare-slider__range{writing-mode:vertical-lr;direction:rtl;block-size:3.5rem;inline-size:100%;left:50%;transform:translate(-50%)}}