.trinsic-before-after{--tba-hairline: rgba(9, 47, 29, .15);--tba-body-color: rgba(9, 47, 29, .7);--tba-caption-muted: rgba(9, 47, 29, .6);overflow:hidden}.trinsic-before-after__wrap{width:100%;max-width:var(--trinsic-content-width);margin-inline:auto;padding-inline:var(--trinsic-gutter);display:flex;align-items:center;gap:60px}.trinsic-before-after__slider{display:block;position:relative;-webkit-user-select:none;user-select:none;flex:1 1 0;min-width:0}.trinsic-before-after__content{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:24px}.trinsic-before-after__media{--compare: 50;position:relative;border-radius:24px 24px 0 0;overflow:hidden;aspect-ratio:var(--ratio, 1);border:1px solid var(--tba-hairline);border-bottom:none;touch-action:none;display:grid;grid-template:1fr / 1fr}.trinsic-before-after__layer{grid-area:1 / 1;position:relative;width:100%;height:100%}.trinsic-before-after__layer--after{z-index:2;clip-path:inset(0 0 0 calc(var(--compare) * 1%))}.trinsic-before-after__layer--before{z-index:1;clip-path:inset(0 calc((100 - var(--compare)) * 1%) 0 0)}.trinsic-before-after__img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:var(--ratio, 1)}.trinsic-before-after__placeholder svg{width:100%;height:100%;background-color:var(--trinsic-blue);fill:var(--trinsic-green)}.trinsic-before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}.trinsic-before-after__range::-webkit-slider-thumb{width:48px;height:48px;border:0;background:transparent;cursor:ew-resize;-webkit-appearance:none;appearance:none}.trinsic-before-after__range::-moz-range-thumb{width:48px;height:48px;border:0;background:transparent;cursor:ew-resize;-webkit-appearance:none;appearance:none}.trinsic-before-after__divider{position:absolute;top:0;bottom:0;left:calc(var(--compare) * 1%);width:3px;background:var(--trinsic-cream);z-index:3;transform:translate(-50%);pointer-events:none}.trinsic-before-after__handle{position:absolute;top:50%;left:calc(var(--compare) * 1%);transform:translate(-50%,-50%);z-index:4;width:48px;height:48px;border-radius:50%;background:var(--trinsic-green);border:3px solid var(--trinsic-cream);display:flex;align-items:center;justify-content:center;gap:2px;pointer-events:none}.trinsic-before-after__chevron{display:flex;align-items:center;justify-content:center}.trinsic-before-after__chevron svg{width:11px;height:11px;color:var(--trinsic-cream)}.trinsic-before-after__captions{display:flex;border-radius:0 0 24px 24px;overflow:hidden;border:1px solid var(--tba-hairline);background:var(--trinsic-white)}.trinsic-before-after__caption{flex:1;text-align:center;padding:14px 0;font-family:var(--font-subheading--family, var(--font-body--family));font-size:13px;font-weight:var(--font-subheading--weight, 600);text-transform:uppercase;letter-spacing:-.04em;line-height:1.2;color:var(--tba-caption-muted)}.trinsic-before-after__caption--after{color:var(--trinsic-green);border-left:1px solid var(--tba-hairline)}.trinsic-before-after__title{font-family:var(--font-heading--family);font-size:40px;font-weight:400;line-height:1.3;color:var(--trinsic-green);margin:0;letter-spacing:var(--trinsic-heading-spacing);text-transform:none}.trinsic-before-after__subtitle{font-family:var(--font-body--family);font-size:20px;font-weight:400;line-height:1.3;color:var(--trinsic-green);margin:0}.trinsic-before-after__body{font-family:var(--font-body--family);font-size:14px;line-height:1.6;color:var(--tba-body-color);margin:0}.trinsic-before-after__body p{margin:0}.trinsic-before-after__cta{display:inline-block;font-family:var(--font-subheading--family, var(--font-body--family));font-size:16px;font-weight:var(--font-subheading--weight, 600);letter-spacing:-.04em;line-height:1.2;text-transform:uppercase;color:var(--trinsic-white);background:var(--trinsic-green);border:2px solid var(--trinsic-green);border-radius:8px;padding:14px 60px;text-decoration:none;transition:background .25s ease,color .25s ease;cursor:pointer;white-space:nowrap;align-self:flex-start}.trinsic-before-after__cta:hover{background:transparent;color:var(--trinsic-green)}.trinsic-before-after__rating{display:flex;align-items:center;gap:8px}.trinsic-before-after__stars{display:flex;gap:2px}.trinsic-before-after__stars svg{width:16px;height:16px;fill:var(--trinsic-review-star, #d4a843)}.trinsic-before-after__rating-text{font-family:var(--font-body--family);font-size:14px;color:var(--trinsic-green);margin:0}.trinsic-before-after__rating-text strong{font-weight:var(--font-subheading--weight, 600)}@media screen and (max-width:749px){.trinsic-before-after__wrap{flex-direction:column;align-items:stretch;gap:32px}.trinsic-before-after__slider,.trinsic-before-after__content{flex:0 0 auto}.trinsic-before-after__caption{font-size:12px;padding:12px 0}.trinsic-before-after__title{font-size:28px}.trinsic-before-after__subtitle{font-size:16px}.trinsic-before-after__content{text-align:center}.trinsic-before-after__cta{align-self:center;font-size:14px;padding:14px 40px}.trinsic-before-after__rating{justify-content:center}}
/*# sourceMappingURL=/cdn/shop/t/21/assets/trinsic-before-after.css.map */