.md-before-after{max-width:var(--page-width);margin:25px auto;display:flex;justify-content:center;align-items:center}.md-before-after__container{position:relative;width:100%;max-width:1200px;height:auto;aspect-ratio:16/9;overflow:hidden}.md-before-after__img{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}.md-before-after__background-img{display:block!important;background-color:#ddd}.md-before-after__foreground-img{width:100%;clip-path:inset(0 50% 0 0)}.md-before-after__slider{position:absolute;-webkit-appearance:none;appearance:none;width:100%;height:100%;background:rgba(242,242,242,.3);outline:0;margin:0;transition:all .2s;display:flex;justify-content:center;align-items:center}.md-before-after__slider:hover{background:rgba(242,242,242,.1)}.md-before-after__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:6px;height:100%;background:#fff;cursor:pointer}.md-before-after__slider::-moz-range-thumb{width:6px;height:100%;background:#fff;cursor:pointer}.md-before-after__slider-button{display:flex!important;pointer-events:none;position:absolute;width:30px;height:30px;border-radius:50%;background-color:#fff;left:calc(49.8% - 18px);top:calc(50% - 18px);display:flex;justify-content:center;align-items:center}.md-before-after__slider-button:after,.md-before-after__slider-button:before{content:"";padding:3px;display:inline-block;border:solid #5d5d5d;border-width:0 2px 2px 0}.md-before-after__slider-button:after{transform:rotate(-45deg)}.md-before-after__slider-button:before{transform:rotate(135deg)}