.before-after{padding-block:var(--space-xl);padding-inline:var(--gutter);text-align:center}.before-after__heading{color:var(--clr-offwhite);margin-block-end:var(--space-xs)}.before-after__sub{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--clr-gold);margin-block-end:var(--space-lg)}.ba__wrapper{aspect-ratio:16/9;-webkit-user-select:none;user-select:none;touch-action:none;cursor:ew-resize;max-width:900px;margin-inline:auto;position:relative;overflow:hidden}.ba__before,.ba__after{position:absolute;inset:0}.ba__before img,.ba__after img{object-fit:cover;pointer-events:none;color:#0000;width:100%;height:100%}.ba__after{clip-path:inset(0 50% 0 0)}.ba__label{bottom:var(--space-sm);background:color-mix(in srgb, var(--clr-black) 70%, transparent);padding:.25em .75em;position:absolute}.ba__before .ba__label{right:var(--space-sm);z-index:3}.ba__after .ba__label{left:var(--space-sm);z-index:2}.ba__handle{inset-block:0;z-index:2;cursor:ew-resize;pointer-events:none;flex-direction:column;align-items:center;margin-left:-1px;display:flex;position:absolute;left:50%}.ba__handle-line{background:var(--clr-offwhite);width:2px;height:100%}.ba__handle-grip{background:var(--clr-offwhite);width:44px;height:44px;color:var(--clr-black);box-shadow:0 2px 16px color-mix(in srgb, var(--clr-black) 40%, transparent);border-radius:50%;place-items:center;display:grid;position:absolute;top:calc(50% - 22px);left:calc(50% - 22px)}.ba__handle-grip svg{width:22px;height:22px}