:root{--before-after-tab-padding:var(--spacing-60);--before-after-width:22rem;--before-after-height:var(--spacing-200);--before-after-slider-width:var(--spacing-xs);--before-after-slider-button-width:var(--spacing-40);--before-after-slider-button-pos:22px}@media (min-width:640px){:root{--before-after-width:var(--spacing-600);--before-after-height:21.25rem;--before-after-slider-width:var(--spacing);--before-after-slider-button-pos:44px;--before-after-slider-button-width:var(--spacing-80)}}@media (min-width:768px){:root{--before-after-tab-padding:var(--spacing-150);--before-after-width:43.75rem;--before-after-height:calc(var(--spacing-200)*2)}}@media (min-width:1024px){:root{--before-after-width:60rem;--before-after-height:33.75rem}}@media (min-width:1280px){:root{--before-after-width:80rem;--before-after-height:45rem;--before-after-slider-button-pos:47px}}.before-after{text-align:center;max-width:120rem;margin:auto}.before-after.white{background-color:var(--color-white)}.before-after.beige{background-color:var(--color-beige)}.before-after.blue{background-color:var(--color-blue-500)}.before-after.light_blue{background-color:var(--color-blue-200)}.before-after.grey{background-color:var(--color-grey-200)}.before-after-outer-wrapper{display:flex;flex-direction:column;grid-gap:var(--spacing-40);gap:var(--spacing-40)}.before-after h2,.before-after h3{margin-bottom:0}.before-after h2{max-width:var(--spacing-600);margin:auto}.before-after-tabs{display:flex;align-items:center;border-radius:var(--border-radius-xl);border:1px solid var(--color-blue-500);overflow:hidden;max-width:var(--spacing-1000);margin:auto}.before-after-tabs h3{padding:var(--spacing-sm) var(--before-after-tab-padding);cursor:pointer;transition:var(--transition-fast)}.before-after-tabs h3:hover{background-color:var(--color-blue-200)}.before-after-tabs span{display:block}.before-after-container{position:relative;width:22rem;width:var(--before-after-width);height:var(--spacing-200);height:var(--before-after-height);margin:auto;border-radius:var(--border-radius-xl);overflow:hidden}.before-after-container .img{position:absolute;top:0;left:0;width:100%;height:100%;background-size:22rem 100%;background-size:var(--before-after-width) 100%}.before-after-container .foreground-img{width:50%}.before-after-container .slider{position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:var(--color-transparent);outline:none;margin:0;transition:all .2s}.before-after-container .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--spacing-xs);width:var(--before-after-slider-width);height:var(--spacing-200);height:var(--before-after-height);background:var(--color-blue-200);cursor:pointer}.before-after-container .slider::-moz-range-thumb{width:var(--spacing-xs);width:var(--before-after-slider-width);height:var(--spacing-200);height:var(--before-after-height);background:var(--color-blue-200);cursor:pointer}.before-after-container .slider-button{pointer-events:none;position:absolute;aspect-ratio:1;width:var(--spacing-40);width:var(--before-after-slider-button-width);top:50%;left:calc(50% - 22px);left:calc(50% - var(--before-after-slider-button-pos));transform:translateY(-50%)}.before-after-container .slider-button svg{width:100%}