.ccard{background:var(--surface);border:1px solid var(--line-d);border-radius:20px;flex-direction:column;min-width:0;transition:border-color .2s,transform .2s;display:flex;position:relative;overflow:hidden}.ccard:hover{border-color:var(--navy);transform:translateY(-2px)}.ccard canvas{aspect-ratio:16/10;background:var(--poster-bg);width:100%;height:auto;display:block}.ccard.big canvas{aspect-ratio:16/8}.ccard-body{flex-direction:column;flex:1;gap:4px;padding:18px 20px 20px;display:flex}.ccard .code{color:var(--navy);font-size:1.5rem;font-weight:820;font-stretch:76%;line-height:1.1}.ccard-title{color:var(--text);margin:0;font-size:1.1rem;font-weight:700;line-height:1.45}.ccard.big .ccard-title{font-size:1.3rem}.ccard-title a{text-decoration:none}.ccard-title a:after{content:"";border-radius:20px;position:absolute;inset:0}.ccard p{color:var(--muted-d);margin:0;font-size:.925rem}.ccard .more{color:var(--navy);margin-top:auto;padding-top:12px;font-size:.92rem;font-weight:600}.ccard:has(a:focus-visible){outline:3px solid var(--sky);outline-offset:3px}.ccard a:focus-visible{outline:none}@media (prefers-reduced-motion:reduce){.ccard{transition:none}.ccard:hover{transform:none}}@media (width<=620px){.ccard.small{flex-direction:row}.ccard.small canvas{aspect-ratio:auto;flex:none;align-self:stretch;width:34%;height:auto}.ccard.small .ccard-body{padding:14px 16px 16px}.ccard.small .code{font-size:1.3rem}.ccard.small .ccard-title{font-size:1rem}}