.urban-shores-before-after{--urban-shores-before-after-position:50%;--urban-shores-before-after-surface:var(--color--base--0);--urban-shores-before-after-surface-subtle:var(--color--base--100);--urban-shores-before-after-heading:var(--text--color--heading);--urban-shores-before-after-content:var(--text--color--content);--urban-shores-before-after-accent:var(--color--primary--700);--urban-shores-before-after-divider:var(--color--base--200);--urban-shores-before-after-shadow:var(--box--shadow);inline-size:100%;min-inline-size:0}.urban-shores-before-after[data-position="0"]{--urban-shores-before-after-position:0%}.urban-shores-before-after[data-position="5"]{--urban-shores-before-after-position:5%}.urban-shores-before-after[data-position="10"]{--urban-shores-before-after-position:10%}.urban-shores-before-after[data-position="15"]{--urban-shores-before-after-position:15%}.urban-shores-before-after[data-position="20"]{--urban-shores-before-after-position:20%}.urban-shores-before-after[data-position="25"]{--urban-shores-before-after-position:25%}.urban-shores-before-after[data-position="30"]{--urban-shores-before-after-position:30%}.urban-shores-before-after[data-position="35"]{--urban-shores-before-after-position:35%}.urban-shores-before-after[data-position="40"]{--urban-shores-before-after-position:40%}.urban-shores-before-after[data-position="45"]{--urban-shores-before-after-position:45%}.urban-shores-before-after[data-position="50"]{--urban-shores-before-after-position:50%}.urban-shores-before-after[data-position="55"]{--urban-shores-before-after-position:55%}.urban-shores-before-after[data-position="60"]{--urban-shores-before-after-position:60%}.urban-shores-before-after[data-position="65"]{--urban-shores-before-after-position:65%}.urban-shores-before-after[data-position="70"]{--urban-shores-before-after-position:70%}.urban-shores-before-after[data-position="75"]{--urban-shores-before-after-position:75%}.urban-shores-before-after[data-position="80"]{--urban-shores-before-after-position:80%}.urban-shores-before-after[data-position="85"]{--urban-shores-before-after-position:85%}.urban-shores-before-after[data-position="90"]{--urban-shores-before-after-position:90%}.urban-shores-before-after[data-position="95"]{--urban-shores-before-after-position:95%}.urban-shores-before-after[data-position="100"]{--urban-shores-before-after-position:100%}.urban-shores-before-after-fallback-item{min-inline-size:0;margin:0}.urban-shores-before-after-media,.urban-shores-before-after-viewport{position:relative;inline-size:100%;overflow:hidden;aspect-ratio:4 / 3;background-color:var(--urban-shores-before-after-surface-subtle)}.urban-shores-before-after-media{border-radius:var(--radius--2xl);box-shadow:var(--urban-shores-before-after-shadow)}.urban-shores-before-after-image,.urban-shores-before-after-placeholder{position:absolute;inset:0;inline-size:100%;block-size:100%}.urban-shores-before-after-image{display:block;object-fit:cover;outline:var(--border--width) solid var(--urban-shores-before-after-divider);outline-offset:calc(var(--border--width) * -1)}.urban-shores-before-after-placeholder{justify-content:center;padding:var(--spacing--3xl);background-color:var(--color--primary--100);color:var(--urban-shores-before-after-content);text-align:center}.urban-shores-before-after-placeholder-mark{align-self:center;color:var(--urban-shores-before-after-accent);font-weight:700;line-height:1.25}.urban-shores-before-after-fallback-label{margin:0;color:var(--urban-shores-before-after-heading);font-weight:700;text-transform:uppercase}.urban-shores-before-after-viewport{user-select:none;border-radius:var(--radius--3xl);box-shadow:var(--urban-shores-before-after-shadow)}.urban-shores-before-after-layer{position:absolute;inset:0}.urban-shores-before-after-layer-after{clip-path:inset(0 0 0 var(--urban-shores-before-after-position))}.urban-shores-before-after-label{position:absolute;z-index:2;inset-block-start:var(--spacing--2xl);padding-block:var(--spacing--sm);padding-inline:var(--spacing--md);border-radius:var(--radius--xl);background-color:var(--urban-shores-before-after-surface);box-shadow:var(--urban-shores-before-after-shadow);color:var(--urban-shores-before-after-heading);font-weight:700;line-height:1.25;text-transform:uppercase}.urban-shores-before-after-layer-before .urban-shores-before-after-label{inset-inline-start:var(--spacing--2xl)}.urban-shores-before-after-layer-after .urban-shores-before-after-label{inset-inline-end:var(--spacing--2xl)}.urban-shores-before-after-divider{position:absolute;z-index:3;inset-block:0;inset-inline-start:var(--urban-shores-before-after-position);inline-size:var(--size--1);transform:translateX(-50%);background-color:var(--urban-shores-before-after-surface);pointer-events:none}.urban-shores-before-after-handle{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:var(--size--28);block-size:var(--size--28);transform:translate(-50%,-50%);border-radius:var(--radius--10xl);background-color:var(--urban-shores-before-after-surface);box-shadow:var(--urban-shores-before-after-shadow);color:var(--urban-shores-before-after-accent);font-weight:700;line-height:var(--size--28);text-align:center}.urban-shores-before-after-control{position:absolute;z-index:4;inset:0;inline-size:100%;block-size:100%;margin:0;appearance:none;border:0;background:#fff0;cursor:ew-resize;touch-action:pan-y}.urban-shores-before-after-control::-webkit-slider-runnable-track{block-size:100%;background:#fff0}.urban-shores-before-after-control::-webkit-slider-thumb{inline-size:var(--size--28);block-size:var(--size--28);appearance:none;border:0;border-radius:var(--radius--10xl);background:#fff0;cursor:ew-resize}.urban-shores-before-after-control::-moz-range-track{block-size:100%;background:#fff0}.urban-shores-before-after-control::-moz-range-thumb{inline-size:var(--size--28);block-size:var(--size--28);border:0;border-radius:var(--radius--10xl);background:#fff0;cursor:ew-resize}.urban-shores-before-after-control:focus-visible{outline:var(--outline--border);outline-offset:calc(var(--spacing--xs) * -1)}.urban-shores-before-after-instructions{margin:0;color:var(--urban-shores-before-after-content)}@media (max-width:478px){.urban-shores-before-after-fallback{grid-template-columns:1fr}.urban-shores-before-after-label{inset-block-start:var(--spacing--lg)}.urban-shores-before-after-layer-before .urban-shores-before-after-label{inset-inline-start:var(--spacing--lg)}.urban-shores-before-after-layer-after .urban-shores-before-after-label{inset-inline-end:var(--spacing--lg)}}