.pixel-canvas{width:100%;height:100%;display:block}.pixel-card{height:400px;width:300px;position:relative;overflow:hidden;display:grid;place-items:center;aspect-ratio:4/5;border:1px solid var(--pixel-card-border,#27272a);background:var(--pixel-card-background,transparent);border-radius:25px;isolation:isolate;transition:border-color .2s cubic-bezier(.5,1,.89,1);-webkit-user-select:none;-moz-user-select:none;user-select:none}.pixel-card:before{content:"";position:absolute;inset:0;margin:auto;aspect-ratio:1;background:radial-gradient(circle,var(--pixel-card-active-color,#09090b),transparent 85%);opacity:0;transition:opacity .8s cubic-bezier(.5,1,.89,1)}.pixel-card:focus-within:before,.pixel-card:hover:before{opacity:1}.pixel-card.pixel-card--fill{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:none;border-radius:0;background:transparent}.pixel-card.pixel-card--fill .pixel-card-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.pixel-card.pixel-card--fill .pixel-canvas{position:absolute;inset:0;z-index:2}.pixel-card.pixel-card--fill:before{z-index:1}