/* Compiled, responsive equivalent of the source's unserved compare.scss. */
.compare-img { position: relative; width: min(900px, 100%); aspect-ratio: 3 / 2; margin: 30px auto 0; border: 2px solid #fff; overflow: hidden; }
.compare-img .img { position: absolute; inset: 0; width: 100%; height: 100%; background-size: var(--comparison-width, 900px) 100%; background-repeat: no-repeat; }
.compare-img .background-img { background-image: url('/greencoat/assets/images/resources/plastic-cup.webp'); }
.compare-img .foreground-img { background-image: url('/greencoat/assets/images/resources/plastic-free-cup.webp'); width: 50%; }
.compare-img .slider { position: absolute; inset: 0; appearance: none; -webkit-appearance: none; width: 100%; height: 100%; background: transparent; outline: none; margin: 0; cursor: ew-resize; }
.compare-img .slider:focus-visible { outline: 3px solid #24593e; outline-offset: -3px; }
.compare-img .slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 6px; height: var(--comparison-height, 600px); background: #dfb637; cursor: ew-resize; }
.compare-img .slider::-moz-range-thumb { width: 6px; height: var(--comparison-height, 600px); background: #dfb637; border: 0; border-radius: 0; cursor: ew-resize; }
.compare-img .slider-button { pointer-events: none; position: absolute; width: 40px; height: 40px; border-radius: 50%; background: #dfb637; left: calc(50% - 18px); top: calc(50% - 20px); color: #fff; font: 24px/40px Arial, sans-serif; }
.compare-img .slider-button::before { content: '\2039'; margin-right: 6px; }
.compare-img .slider-button::after { content: '\203a'; }