.before-after-heading{text-align:center;font-size:clamp(24px, 4vw, 32px);margin-bottom:8px}.before-after-subheading{text-align:center;font-size:clamp(14px, 2vw, 18px);color:#666;margin-bottom:40px}.before-after-wrapper{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.before-after-controls{display:none;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:20px}.before-after-control{width:44px;height:44px;border-radius:50%;border:1px solid #e5e5e5;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.before-after-control:disabled{opacity:.5;cursor:not-allowed}.before-after-control svg{width:20px;height:20px}.before-after-slider{position:relative;width:100%;flex:1;min-width:300px;aspect-ratio:3/4;overflow:hidden;cursor:ew-resize;user-select:none;background:#f5f5f5}.image-container{position:absolute;top:0;left:0;width:100%;height:100%}.image-container img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.before-image{clip-path:inset(0 50% 0 0);z-index:2}.after-image{z-index:1}.slider-handle{position:absolute;top:0;left:50%;width:4px;height:100%;background:#fff;transform:translateX(-50%);z-index:3;pointer-events:none}.slider-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:transform 0.2s ease}.slider-button:hover{transform:translate(-50%,-50%) scale(1.1)}.slider-button{background:#fff;border-radius:50%;box-shadow:0 2px 8px rgb(0 0 0 / .2);display:flex;align-items:center;justify-content:center;width:48px;height:48px}.slider-button svg{filter:drop-shadow(0 2px 8px rgb(0 0 0 / .2))}@media (min-width:768px){.before-after-wrapper{gap:30px}}@media (min-width:1024px){.before-after-wrapper{gap:40px}}@media (max-width:767px){.before-after-controls{display:flex}.before-after-wrapper{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start}.before-after-wrapper::-webkit-scrollbar{display:none}.before-after-slider{flex:0 0 85%;scroll-snap-align:start;min-width:0}}