.ss-vs{--vs-skew: 12%;--vs-rule: 10px;position:relative;display:block;width:100%;aspect-ratio:2.85 / 1;border-radius:var(--ss-radius-lg);overflow:hidden;background:var(--r-50);isolation:isolate}.ss-vs__half{position:absolute;top:0;right:0;bottom:0;left:0;display:block;overflow:hidden;text-decoration:none}.ss-vs__half--a{clip-path:polygon(0 0,calc(50% + var(--vs-skew)) 0,calc(50% - var(--vs-skew)) 100%,0 100%);z-index:1}.ss-vs__half--b{clip-path:polygon(calc(50% + var(--vs-skew)) 0,100% 0,100% 100%,calc(50% - var(--vs-skew)) 100%);z-index:1}.ss-vs__video{position:absolute;inset-block:0;width:calc(50% + var(--vs-skew));height:100%;object-fit:cover;display:block;background:var(--r-50)}.ss-vs__half--a .ss-vs__video{left:0;right:auto}.ss-vs__half--b .ss-vs__video{right:0;left:auto}.ss-vs__video{z-index:1;pointer-events:none}.ss-vs__label{position:absolute;z-index:3;width:auto;max-width:34%;padding:var(--ss-space-3) var(--ss-space-4);border-radius:var(--ss-radius);color:#fff;background:#1a131585;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 20px #1a131538}.ss-vs__half--a .ss-vs__label{inset-block-end:var(--ss-space-5);left:var(--ss-space-5);right:auto;text-align:left}.ss-vs__half--b .ss-vs__label{inset-block-end:var(--ss-space-5);right:var(--ss-space-5);left:auto;text-align:right}.ss-vs__label strong{display:block;font-family:var(--ss-font-display);font-size:clamp(1.3rem,3vw,2.1rem);font-weight:400;line-height:1.1}.ss-vs__label span{display:block;margin-top:2px;font-size:clamp(.8125rem,1.2vw,.9375rem);letter-spacing:.03em;opacity:.9}.ss-vs__rule{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none;background:#fff;clip-path:polygon(calc(50% + var(--vs-skew) - var(--vs-rule) / 2) 0,calc(50% + var(--vs-skew) + var(--vs-rule) / 2) 0,calc(50% - var(--vs-skew) + var(--vs-rule) / 2) 100%,calc(50% - var(--vs-skew) - var(--vs-rule) / 2) 100%)}.ss-vs__rule:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--r-500);clip-path:polygon(calc(50% + var(--vs-skew) - 1.5px) 0,calc(50% + var(--vs-skew) + 1.5px) 0,calc(50% - var(--vs-skew) + 1.5px) 100%,calc(50% - var(--vs-skew) - 1.5px) 100%)}@media(hover:hover){.ss-vs__half{cursor:pointer}}@media(max-width:699px){.ss-vs{--vs-skew: 7%;--vs-rule: 8px}.ss-vs__video{inset-inline:0;width:100%;height:calc(50% + var(--vs-skew))}.ss-vs__half--a .ss-vs__video{top:0;bottom:auto}.ss-vs__half--b .ss-vs__video{bottom:0;top:auto}.ss-vs__half--a{clip-path:polygon(0 0,100% 0,100% calc(50% - var(--vs-skew)),0 calc(50% + var(--vs-skew)))}.ss-vs__half--b{clip-path:polygon(0 calc(50% + var(--vs-skew)),100% calc(50% - var(--vs-skew)),100% 100%,0 100%)}.ss-vs__rule{clip-path:polygon(0 calc(50% + var(--vs-skew) - var(--vs-rule) / 2),100% calc(50% - var(--vs-skew) - var(--vs-rule) / 2),100% calc(50% - var(--vs-skew) + var(--vs-rule) / 2),0 calc(50% + var(--vs-skew) + var(--vs-rule) / 2))}.ss-vs__rule:after{clip-path:polygon(0 calc(50% + var(--vs-skew) - 1.5px),100% calc(50% - var(--vs-skew) - 1.5px),100% calc(50% - var(--vs-skew) + 1.5px),0 calc(50% + var(--vs-skew) + 1.5px))}.ss-vs__label{max-width:66%;padding:var(--ss-space-3)}.ss-vs__half--a .ss-vs__label{inset-block-end:calc(50% + 8px);inset-block-start:auto;left:var(--ss-space-4);right:auto;height:auto;display:block;text-align:start}.ss-vs__half--b .ss-vs__label{inset-block-end:var(--ss-space-4);left:var(--ss-space-4);right:auto;text-align:start}}@media(prefers-reduced-motion:reduce){.ss-vs__video{transition:none}}.ss-hero--vs{grid-template-columns:1fr!important;gap:var(--ss-space-6)}.ss-hero--vs .ss-hero__copy{align-self:start;max-width:var(--ss-maxw-text, 62ch)}.ss-hero--vs .ss-vs{align-self:start;height:auto;min-height:0;width:100%}@media(min-width:700px){.ss-hero--vs .ss-vs{aspect-ratio:2.85 / 1;height:auto;max-height:70vh}}@media(max-width:699px){.ss-hero--vs{display:flex;flex-direction:column}.ss-hero--vs .ss-vs{order:-1}.ss-hero--vs .ss-hero__copy{order:0}.ss-hero--vs .ss-vs{aspect-ratio:auto;height:70vh;height:70svh;max-height:none;margin-top:0;align-self:stretch;margin-inline:calc(var(--ss-gutter) * -1);width:auto;border-radius:0}}@media(max-width:699px){.ss-pin__hero,.ss-hero--vs{padding-top:0}.ss-hero--vs .ss-hero__copy{padding-top:var(--ss-space-5)}}
/*# sourceMappingURL=/cdn/shop/t/65/assets/ss-vs.css.map */