.project-compare{position:relative;aspect-ratio:1.03;overflow:hidden;background:var(--stone);isolation:isolate}.renovation-projects .project-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}.comparison-finished{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split));pointer-events:none}.comparison-labels{position:absolute;inset:12px 12px auto;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.comparison-labels span{background:rgb(29 24 18 / .88);color:var(--paper);padding:6px 9px;font:400 10px/1.4 var(--sans)}.comparison-line{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:var(--paper);transform:translateX(-50%);pointer-events:none}.comparison-line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:0 2px 10px rgb(30 20 10 / .2);font-size:23px}.comparison-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.project-compare:focus-within{outline:3px solid var(--bronze);outline-offset:3px}.comparison-disclosure{display:block;font:400 12px/1.65 var(--sans);color:var(--muted);margin-top:9px}
@media(max-width:600px){.project-compare{aspect-ratio:1.07}.renovation-projects figure:not(:first-child) .project-compare{aspect-ratio:.8}.comparison-labels{inset:8px 6px auto;gap:4px;flex-wrap:wrap}.comparison-labels span{font-size:8px;padding:4px 5px}.comparison-line span{width:32px;height:32px;font-size:20px}.comparison-disclosure{font-size:11px}}

.project-pagination,.project-swipe-hint{display:none}
@media(max-width:600px){
 .renovation-page .recent-project-carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 0 8px;margin-right:-8.14%;padding-right:7%;overscroll-behavior-x:contain}
 .recent-project-carousel::-webkit-scrollbar{display:none}
 .renovation-page .recent-project-carousel>figure{flex:0 0 85%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
 .renovation-page .recent-project-carousel>figure .project-compare{aspect-ratio:1.03;touch-action:pan-x pan-y}
 .renovation-page .recent-project-carousel>figure figcaption{font-size:20px;line-height:1.4}
 .recent-project-carousel .comparison-range{inset:auto;left:clamp(22px,var(--split),calc(100% - 22px));top:50%;width:44px;height:44px;transform:translate(-50%,-50%);touch-action:none}
 .recent-project-carousel .comparison-line span{width:40px;height:40px}
 .recent-project-carousel .comparison-labels span{font-size:10px;padding:6px 9px}
 .project-pagination{display:flex;align-items:center;justify-content:center;gap:0;margin-top:12px}
 .project-pagination button{display:grid;place-items:center;background:none;border:0;width:36px;height:36px;padding:0;cursor:pointer}
 .project-pagination button span{width:7px;height:7px;border:1px solid var(--bronze);border-radius:50%}
 .project-pagination button[aria-current=true] span{background:var(--bronze)}
 .project-page-count{font-size:12px;color:var(--muted);margin-left:12px}
 .project-swipe-hint{display:block;font-size:11px;color:var(--muted);text-align:center;margin-top:5px}
}