.video-card { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--paper); }
.video-card video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.video-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(32,34,40,.35); transition: background .25s ease; }
.video-card p { color: rgba(255,255,255,.84); }
.video-card:hover { background: var(--ink); color: var(--paper); }
.video-card:hover::after { background: rgba(232,138,69,.27); }
.video-card:hover p { color: var(--white); }
.video-card .path-icon { background: rgba(246,245,241,.12); }
.image-card { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--paper); }
.image-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 36%; filter: grayscale(1); }
.image-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(32,34,40,.28); transition: background .25s ease; }
.image-card:hover { background: var(--ink); color: var(--paper); }
.image-card:hover::after { background: rgba(232,138,69,.2); }