.education-gallery { gap: var(--space-5); }
.education-media { position: relative; overflow: hidden; background: #fff; aspect-ratio: var(--ratio, 16 / 9); border-radius: var(--radius-card); }
.education-media > img, .education-media > video, .education-media > .education-vector { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.education-vector > svg { display:block; width:100%; height:100%; }
.education-media > video, .education-vector { visibility:hidden; }
.education-media[data-ready] > video, .education-media[data-ready] > .education-vector { visibility:visible; }
.education-media[data-ready] > .education-poster { visibility:hidden; }
.education-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); align-items:start; }
.education-icons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:clamp(8px,2vw,32px); padding:clamp(16px,4vw,64px); background:var(--ink); }
.education-icons .education-media { --ratio:1; background:transparent; }
.education-image { display:block; width:100%; height:auto; }
.education-composite { position:relative; overflow:hidden; background:white; }
.education-composite > .education-image { position:relative; z-index:2; pointer-events:none; }
.education-composite > .education-screen { position:absolute; z-index:1; transform-origin:0 0; }
.education-screen .education-media { width:1200px; height:750px; background:#fff; outline:2px solid #242424; }
.education-screen .education-poster { object-fit:cover; object-position:top; }
.education-composite > .action-foreground { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; }
.education-floor > .education-media { position:absolute; left:6.5%; top:21%; width:44%; z-index:3; mix-blend-mode:multiply; }
.site-recording { position:relative; overflow:hidden; }
.site-recording img { display:block; width:100%; height:auto; }
.site-recording video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.site-recording[data-playing] video { opacity:1; }
/* In the websites grid the recording is 2:1 while the screenshots are 760:475, so it
   rendered 295px tall beside 368px neighbours. Lock it to the screenshot ratio and crop. */
.work-grid-sites .site-recording { aspect-ratio: 760 / 475; }
.work-grid-sites .site-recording img,
.work-grid-sites .site-recording video { height:100%; object-fit:cover; }
.work-motion .education-media { width:100%; }
#crossroads-title { font-size:clamp(2.5rem,7vw,6rem); }
@media (max-width:700px) { .education-pair { gap:16px; } }