.block-before-after{font-family:var(--font-body,ui-sans-serif, system-ui, -apple-system, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);padding-block:calc(3rem * var(--v-rhythm,1) * var(--block-spacing,1));padding-inline:max(1rem, (100% - var(--content-width,1120) * 1px) / 2);color:var(--color-text)}@media (width>=768px){.block-before-after{padding-block:calc(4.5rem * var(--v-rhythm,1) * var(--block-spacing,1));padding-inline:max(1.5rem, (100% - var(--content-width,1120) * 1px) / 2)}}.block-before-after>*{box-sizing:border-box;width:100%;min-width:0}.block-before-after__title{font-family:var(--font-heading,var(--font-body,ui-sans-serif, system-ui, -apple-system, Segoe UI, roboto, Helvetica Neue, arial, sans-serif));overflow-wrap:anywhere;max-width:100%;font-size:calc(clamp(1.75rem, 2vw + 1.2rem, 2.5rem) * var(--v-heading-scale,1) * var(--heading-scale,1));line-height:var(--v-heading-leading,1.15);font-weight:var(--v-heading-weight,700);letter-spacing:var(--v-heading-tracking,0);text-align:var(--v-heading-align,inherit);text-transform:var(--v-heading-transform,none);margin:0}[data-heading-align=start] .block-before-after__title{text-align:start}[data-heading-align=center] .block-before-after__title{text-align:center}[data-heading-align=end] .block-before-after__title{text-align:end}.block-before-after__title{margin-bottom:1.5rem}.block-before-after__grid{gap:1.5rem;display:grid}@media (width>=768px){.block-before-after__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.block-before-after[data-columns="1"] .block-before-after__grid{grid-template-columns:minmax(0,1fr)}.block-before-after__item{margin:0}.block-before-after__frame{--split:50%;aspect-ratio:4/3;border-radius:var(--v-radius-media,calc(var(--radius,12) * 1px));background:var(--v-surface-muted,var(--color-surface,color-mix(in srgb, var(--color-text) 6%, transparent)));position:relative;overflow:hidden}.block-before-after__frame img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.block-before-after[data-ratio="1-1"] .block-before-after__frame{aspect-ratio:1}.block-before-after[data-ratio="3-4"] .block-before-after__frame{aspect-ratio:3/4}.block-before-after__after{clip-path:inset(0 0 0 var(--split))}.block-before-after__divider{inset-block:0;left:var(--split);background:var(--color-background);width:2px;box-shadow:0 0 0 1px color-mix(in srgb, var(--color-text) 30%, transparent);pointer-events:none;margin-left:-1px;position:absolute}.block-before-after__range{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;display:none;position:absolute;inset:0}.block-before-after__frame[data-ready] .block-before-after__range{display:block}.block-before-after__frame:has(:focus-visible) .block-before-after__divider{background:var(--color-accent);width:4px;margin-left:-2px}.block-before-after__caption{text-align:center;color:var(--v-text-muted,color-mix(in srgb, var(--color-text) 70%, transparent));margin-top:.75rem}.block-before-after__caption:empty{display:none}
