*{box-sizing:border-box}body{display:grid;min-height:100vh;place-items:center;font-family:Cormorant Garamond,serif;gap:4rem;padding:4rem 0;background:#fff}@media(min-width:600px){body{grid-template-columns:auto auto;margin:0 auto;justify-content:center;gap:8rem;padding:8rem 0}article:nth-of-type(2n){translate:0 50%}}:is(.cursor,.cursor__text){position:fixed;top:0;left:0;translate:calc((var(--x) * 1px) - 50%) calc((var(--y) * 1px) - 50%);border-radius:50%;aspect-ratio:1;padding:1rem;pointer-events:none;display:grid;place-items:center;font-weight:700;font-size:1.5rem;--color: hsl(var(--hue) 100% 80%);background:var(--color);mix-blend-mode:difference;color:#fff;border:4px solid var(--color)}.cursor--text{background:#0003;mix-blend-mode:normal;color:#fff;font-weight:900}.cursor .backdrop{position:absolute;inset:0}:root:has(article:hover){--active: 1}.cursor{scale:var(--active, 0);transition:scale .2s}:root:has(article:nth-of-type(2n):hover){--hue: 210}:root:has(article:nth-of-type(odd):hover){--hue: 10}article,article *{cursor:none}article{position:relative;overflow:hidden;align-self:center;justify-self:center;box-shadow:var(--shadow-5)}article:hover{--hover: 1}article:focus-within{--hover: 1;outline:4px solid hsl(var(--hue, 10) 100% 60%);outline-offset:4px}article:nth-of-type(2n){--hue: 10}.info{position:absolute;bottom:0;text-align:right;height:50%;width:100%;background:linear-gradient(transparent,#000);color:#fff;display:grid;align-content:end;padding:1rem}article{width:300px;aspect-ratio:3/4}img{scale:calc(1 + (var(--hover) / 5));transition:scale .2s;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}article a span:last-of-type{text-transform:uppercase;opacity:.8;font-size:.875rem;display:block;text-decoration:none;text-underline:none}article a{font-weight:700;font-size:3rem;margin:0;color:#fff;display:inline-block;outline:0px solid transparent;position:absolute;display:grid;inset:0;align-content:end;padding:1rem;background:linear-gradient(transparent 50%,#000);text-decoration:none}article a span:first-of-type{position:relative}article a{justify-content:start}article:nth-of-type(2n) a{justify-content:end;text-align:right}article a span:first-of-type:after{content:"";height:4px;position:absolute;right:0;left:0;background:#fff;bottom:0;scale:var(--hover, 0) 1;transition:scale .2s;transform-origin:0 50%}article:nth-of-type(2n) a span:first-of-type:after{transform-origin:100% 50%}