.beer-slider{display:inline-block;position:relative;overflow:hidden}.beer-slider *,.beer-slider:before,.beer-slider:after,.beer-slider *:before,.beer-slider *:after{box-sizing:border-box}.beer-slider img{vertical-align:bottom}.beer-slider>img{max-width:100%;height:auto}.beer-reveal{position:absolute;left:0;top:0;bottom:0;right:50%;overflow:hidden;z-index:1;opacity:0;transition:opacity 0.35s}.beer-reveal>:first-child{width:200%;max-width:none}.beer-reveal>img:first-child{height:auto}.beer-range{position:absolute;z-index:2;top:0;bottom:0;height:100%;margin:0;left:-1px;width:calc(100% + 2px);cursor:pointer;-webkit-appearance:slider-horizontal!important;-moz-appearance:none;opacity:0;-ms-touch-action:auto;touch-action:auto}.beer-range::-webkit-slider-thumb{-webkit-appearance:none;height:300vh}.beer-range::-moz-range-thumb{-webkit-appearance:none;height:300vh}.beer-range::-ms-tooltip{display:none}.beer-handle{position:absolute;z-index:2;pointer-events:none;top:50%;left:50%;width:48px;height:48px;border-radius:50%;box-shadow:0 0 6px #fff0;transition:background 0.3s,box-shadow 0.3s,opacity 0.5s 0.25s;margin-left:-22px;margin-top:-22px;border:3px solid #fff;-webkit-border-radius:1000px;-moz-border-radius:1000px;-webkit-box-shadow:0 0 12px rgb(51 51 51 / .5);-moz-box-shadow:0 0 12px rgb(51 51 51 / .5)}.beer-handle:before,.beer-handle:after{content:'';position:absolute;width:10px;height:10px;top:50%;border-top:solid 2px;border-left:solid 2px;transform-origin:0 0}.beer-handle:before{left:10px;transform:rotate(-45deg)}.beer-handle:after{right:0;transform:rotate(135deg)}.beer-range:focus~.beer-handle{background:rgb(255 255 255 / .85);box-shadow:0 0 3px rgb(0 0 0 / .4)}.beer-slider[data-beer-label]:after,.beer-reveal[data-beer-label]:after{content:attr(data-beer-label);position:absolute;top:1.5rem;line-height:1;padding:.5rem;border-radius:.125rem;background:linear-gradient(135deg,#2E7ED2 0%,#67C0E1 100%);color:#fff;text-transform:capitalize;border-radius:10px}.beer-slider[data-beer-label]:after{right:1.5rem}.beer-reveal[data-beer-label]:after{left:1.5rem}.beer-slider[data-beer-label=""]:after,.beer-reveal[data-beer-label=""]:after{content:none}.beer-ready .beer-reveal,.beer-ready .beer-handle{opacity:1}.slider-container{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px}#comparison{width:100%;padding-bottom:100%;overflow:hidden;position:relative}.figure{position:absolute;background-size:cover;font-size:0;width:100%;height:100%;margin:0}.figure1{position:absolute;background-size:cover;font-size:0;width:100%;height:100%;margin:0}.figure2{position:absolute;background-size:cover;font-size:0;width:100%;height:100%;margin:0}.figure3{position:absolute;background-size:cover;font-size:0;width:100%;height:100%;margin:0}#divisor{background-size:cover;position:absolute;width:50%;box-shadow:0 5px 10px -2px rgb(0 0 0 / .3);bottom:0;height:100%;&::before,&::after{content:'';position:absolute;right:-2px;width:4px;height:calc(50% - 25px);background:#fff;z-index:3}&::before{top:0;box-shadow:0 -3px 8px 1px rgb(0 0 0 / .3)}&::after{bottom:0;box-shadow:0 3px 8px 1px rgb(0 0 0 / .3)}}#divisor1{background-size:cover;position:absolute;width:50%;box-shadow:0 5px 10px -2px rgb(0 0 0 / .3);bottom:0;height:100%;&::before,&::after{content:'';position:absolute;right:-2px;width:4px;height:calc(50% - 25px);background:#fff;z-index:3}&::before{top:0;box-shadow:0 -3px 8px 1px rgb(0 0 0 / .3)}&::after{bottom:0;box-shadow:0 3px 8px 1px rgb(0 0 0 / .3)}}#divisor2{background-size:cover;position:absolute;width:50%;box-shadow:0 5px 10px -2px rgb(0 0 0 / .3);bottom:0;height:100%;&::before,&::after{content:'';position:absolute;right:-2px;width:4px;height:calc(50% - 25px);background:#fff;z-index:3}&::before{top:0;box-shadow:0 -3px 8px 1px rgb(0 0 0 / .3)}&::after{bottom:0;box-shadow:0 3px 8px 1px rgb(0 0 0 / .3)}}#divisor3{background-size:cover;position:absolute;width:50%;box-shadow:0 5px 10px -2px rgb(0 0 0 / .3);bottom:0;height:100%;&::before,&::after{content:'';position:absolute;right:-2px;width:4px;height:calc(50% - 25px);background:#fff;z-index:3}&::before{top:0;box-shadow:0 -3px 8px 1px rgb(0 0 0 / .3)}&::after{bottom:0;box-shadow:0 3px 8px 1px rgb(0 0 0 / .3)}}#handle{position:absolute;height:50px;width:50px;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);z-index:1;&::before,&::after{content:'';width:0;height:0;border:6px inset #fff0;position:absolute;top:50%;margin-top:-6px}&::before{border-right:6px solid #fff;left:50%;margin-left:-17px}&::after{border-left:6px solid #fff;right:50%;margin-right:-17px}}#handle1{position:absolute;height:50px;width:50px;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);z-index:1;&::before,&::after{content:'';width:0;height:0;border:6px inset #fff0;position:absolute;top:50%;margin-top:-6px}&::before{border-right:6px solid #fff;left:50%;margin-left:-17px}&::after{border-left:6px solid #fff;right:50%;margin-right:-17px}}#handle2{position:absolute;height:50px;width:50px;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);z-index:1;&::before,&::after{content:'';width:0;height:0;border:6px inset #fff0;position:absolute;top:50%;margin-top:-6px}&::before{border-right:6px solid #fff;left:50%;margin-left:-17px}&::after{border-left:6px solid #fff;right:50%;margin-right:-17px}}#handle3{position:absolute;height:50px;width:50px;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);z-index:1;&::before,&::after{content:'';width:0;height:0;border:6px inset #fff0;position:absolute;top:50%;margin-top:-6px}&::before{border-right:6px solid #fff;left:50%;margin-left:-17px}&::after{border-left:6px solid #fff;right:50%;margin-right:-17px}}input[type=range]{-webkit-appearance:none;-moz-appearance:none;position:absolute;top:50%;left:-25px;transform:translateY(-50%);background-color:#fff0;width:calc(100% + 50px);z-index:2;&:focus,&:active{border:none;outline:none}}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:50px;width:50px;border-radius:50%;background:#fff0;border:4px solid #fff;box-shadow:0 0 8px 1px rgb(0 0 0 / .3)}input[type=range]::-moz-range-track{-moz-appearance:none;height:15px;width:100%;background-color:#fff0;position:relative;outline:none}