.BeforeAfter{background-color:var(--color-light-gray)}.BeforeAfter_wrapper{padding:0 10px;display:grid;grid-template-columns:minmax(0,1fr);max-width:1200px;margin:0 auto;width:100%}@media screen and (min-width:1240px){.BeforeAfter_wrapper{gap:var(--spacing--medium);grid-template-columns:repeat(2,minmax(0,1fr))}}.BeforeAfter_content{display:flex;flex-direction:column;justify-content:space-between}.BeforeAfter_title{font-size:var(--font--medium);font-weight:600;line-height:1.2;letter-spacing:-.96px;margin-bottom:var(--spacing--large);max-width:445px}@media screen and (min-width:1240px){.BeforeAfter_title{font-size:var(--font--large);font-weight:600;line-height:110%;letter-spacing:-1.44px;margin-bottom:0}}.BeforeAfter_label{color:var(--color--gray);font-size:var(--font--xxsmall);font-weight:400;line-height:110%;letter-spacing:.48px;text-transform:uppercase;margin:var(--spacing--medium) 0}@media screen and (min-width:1240px){.BeforeAfter_label{margin:var(--spacing--large) 0}}.BeforeAfter_list{border-top:1px solid var(--color--black-020);border-bottom:1px solid var(--color--black-020);padding:var(--spacing--xsmall) 0}@media screen and (min-width:1240px){.BeforeAfter_list{padding:var(--spacing--regular) 0}}.BeforeAfter_list li{display:flex;flex-direction:column;gap:var(--spacing--xxsmall);padding:var(--spacing--small) 0;align-items:baseline}@media screen and (min-width:1240px){.BeforeAfter_list li{flex-direction:row;gap:var(--spacing--small)}}.BeforeAfter_txtBig{font-size:var(--font--medium);font-weight:600;line-height:120%;letter-spacing:-.96px}@media screen and (min-width:1240px){.BeforeAfter_txtBig{font-size:22px;font-weight:600;line-height:110%;letter-spacing:-1.44px}}.BeforeAfter_txtSmall{font-size:20px;font-weight:400;line-height:140%;letter-spacing:-.32px}@media screen and (min-width:1240px){.BeforeAfter_txtSmall{font-size:var(--font--medium);line-height:120%;letter-spacing:-.96px}}@media screen and (min-width:1240px){.BeforeAfter_mobileContent{display:none}}.BeforeAfter_desktopContent{display:none}@media screen and (min-width:1240px){.BeforeAfter_desktopContent{display:block}}.BeforeAfter_ab-wrapper{position:relative;aspect-ratio:1;max-height:400px;width:100%}.BeforeAfter_ab-wrapper:before{background-color:#b5ede6bf;border-radius:40px;top:10px;content:"before";left:10px;opacity:0;padding:5px 10px;position:absolute;transition:opacity .2s ease-in-out;z-index:15}.BeforeAfter_ab-wrapper:after{background-color:#b5ede6bf;border-radius:40px;top:10px;color:green;opacity:0;padding:5px 10px;position:absolute;right:10px;transition:opacity .2s ease-in-out;z-index:15;content:"after"}.BeforeAfter_beforeImageWrapper{bottom:0;left:0;overflow:hidden;position:absolute;top:0;z-index:10}.BeforeAfter_beforeImage{background-size:cover;height:100%;width:100%}.BeforeAfter_afterImage{background-size:cover;top:0;right:0;bottom:0;left:0;position:absolute}.BeforeAfter_handle{align-items:center;background:var(--color--white);bottom:0;cursor:col-resize;display:flex;justify-content:center;left:50%;position:absolute;top:0;width:2px;z-index:20}.BeforeAfter_handle:before{content:"";position:absolute;top:0;right:-24px;bottom:0;left:-24px}.BeforeAfter_handle:after{align-items:center;background:var(--color--white);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 4L1 12L9 20' stroke='%23212325'/%3E%3Cpath d='M15 4L23 12L15 20' stroke='%23212325'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;content:"";display:flex;font-weight:700;justify-content:center;max-height:32px;max-width:48px;min-height:32px;min-width:48px}.BeforeAfter_gradient{width:100%;height:100%;position:absolute;top:0;left:0;background:linear-gradient(0deg,#0006 10%,#fc466b00)}.BeforeAfter_beforeLabel{position:absolute;margin:0;bottom:24px;color:var(--color--white);text-align:center;font-size:var(--font--small);font-weight:500;line-height:100%;letter-spacing:-.28px;text-transform:uppercase;left:63px}@media screen and (min-width:1240px){.BeforeAfter_beforeLabel{bottom:34px;font-size:var(--font--regular);line-height:110%;letter-spacing:-.32px;left:137px}}.BeforeAfter_afterLabel{position:absolute;margin:0;right:0;width:50%;bottom:24px;color:var(--color--white);text-align:center;font-size:var(--font--small);font-weight:500;line-height:100%;letter-spacing:-.28px;text-transform:uppercase}@media screen and (min-width:1240px){.BeforeAfter_afterLabel{bottom:34px;font-size:var(--font--regular);line-height:110%;letter-spacing:-.32px}}
/*# sourceMappingURL=/cdn/shop/t/352/assets/before-after.css.map */
