*{box-sizing:border-box}body{margin:0;color:#171717;background:#fff;font:16px/1.5 system-ui,sans-serif}header,main{width:min(1100px,90vw);margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid #ded8cb}header img{width:38px}a,button{color:inherit}h1{font:normal clamp(38px,6vw,68px)/1.05 Georgia,serif;margin:24px 0}main{padding:24px 0 50px}#cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr));gap:32px}.card{max-width:590px;text-decoration:none}.card img{width:100%;display:block}.card strong{display:block;margin-top:10px}.card:hover strong{text-decoration:underline}.compare{position:relative;isolation:isolate;overflow:hidden;--split:0%}.compare img{width:100%;display:block}.compare #before{position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--split)) 0 0)}.divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:white;box-shadow:0 0 3px #333}.divider b{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);border:1px solid #bc994c;border-radius:50%;background:white;width:38px;height:38px;text-align:center;font:24px/34px Georgia}.compare[data-end="after"] b{left:19px}.compare[data-end="before"] b{left:-19px}.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;touch-action:pan-y}.compare:focus-within{outline:2px solid #947235;outline-offset:3px}.actions{display:flex;gap:22px;margin-top:12px}button{font:inherit;background:none;border:0;text-decoration:underline;cursor:pointer;padding:8px 0}
