/* Project cover art: scalable, self-contained, and consistent at every size. */
.project-grid .project-visual{height:auto;aspect-ratio:9/5}
.project-grid .project-artwork{padding:0;background:#0c0e11;border-color:#34373d;isolation:isolate}
.project-artwork img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.75,.25,1),filter .4s ease}
.project-card:is(:hover,:focus-visible) .project-artwork img{transform:scale(1.025);filter:brightness(1.08)}
.project-grid :is(.project-artwork-js-analyser,.project-artwork-recox){background:#080808;border-color:#383838}
.project-card:is(:hover,:focus-visible) .project-artwork-js-analyser{border-color:#aaaaaa}
.project-card:is(:hover,:focus-visible) .project-artwork-sectiv-burp{border-color:#936d59}
.project-card:is(:hover,:focus-visible) .project-artwork-recox{border-color:#aaaaaa}
@media(max-width:800px) and (min-width:621px){.project-grid .project-visual-react .react-illustration{inset:40px 15px 30px}.project-grid .project-visual-react .react-illustration svg{width:95px;height:100px}.project-grid .project-visual-react .visual-footnote{bottom:12px;font-size:7px}}
@media(max-width:620px){.project-grid .project-visual-react .react-illustration{inset:35px 18px 29px}.project-grid .project-visual-react .react-illustration svg{width:110px;height:105px}.project-grid .project-visual-react .project-file{font-size:8px}.project-grid .project-visual-react .visual-footnote{bottom:13px;font-size:7px}}
@media(prefers-reduced-motion:reduce){.project-artwork img{transition:none}.project-card:is(:hover,:focus-visible) .project-artwork img{transform:none}}