.before-after-wrapper { outline: 1px #b5b5b5 solid; -webkit-box-shadow: 0px 8px 17px -1px rgba(33, 50, 50, 0.34); -moz-box-shadow:    0px 8px 17px -1px rgba(33, 50, 50, 0.34); box-shadow: 0px 8px 17px -1px rgba(33, 50, 50, 0.34); position: relative; aspect-ratio: 3/2; width: 100%; min-height: 200px; overflow: hidden; background: #eee; display: block !important;}

.before-after-wrapper::before { background-color: #4fbfa8; border-radius: 60px; top: 15px; color: white; content: 'BEFORE'; left: 15px; opacity: 1; padding: 5px 16px; position: absolute; transition: opacity 200ms ease-in-out; z-index: 15; font-family: 'Cuprum', sans-serif; font-weight: 700; font-size: 13pt; text-transform: uppercase; pointer-events: none; }

.before-after-wrapper::after { background-color: #4fbfa8; border-radius: 60px; top: 15px; color: white; content: 'AFTER'; right: 15px; opacity: 1; padding: 5px 16px; position: absolute; transition: opacity 200ms ease-in-out; z-index: 15; font-family: 'Cuprum', sans-serif; font-weight: 700; font-size: 13pt;text-transform: uppercase; pointer-events: none; }

.before-image-wrapper { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; overflow: hidden; z-index: 10; border-right: 2px solid white; }

.before-image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; background-position: left center; }

.after-image {background-size: 100% 100%; background-repeat: no-repeat; background-position: center; inset: 0; position: absolute; z-index: 5;}

.handle { align-items: center; background: #4fbfa8; bottom: 0; cursor: col-resize; display: flex; justify-content: center; left: 50%; position: absolute; top: 0; width: 6px; z-index: 100; transform: translateX(-50%); -webkit-box-shadow: -10px 0px 60px 0px rgba(33, 50, 50, 0.95); -moz-box-shadow: -10px 0px 60px 0px rgba(33, 50, 50, 0.95); box-shadow: -10px 0px 60px 0px rgba(33, 50, 50, 0.95); }

.handle::after { content: ''; width: 40px; height: 40px; background: #4fbfa8; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>'); background-repeat: no-repeat; background-position: center; -webkit-box-shadow: -10px 0px 12px 0px rgba(33, 50, 50, 0.1); -moz-box-shadow: -10px 0px 12px 0px rgba(33, 50, 50, 0.1); box-shadow: -10px 0px 12px 0px rgba(33, 50, 50, 0.1); }