.lab-page { background: #f5f5f2; color: var(--black); }
.lab-page a { transition: opacity .2s ease; }
.lab-page a:hover { opacity: .65; }
.lab-work { padding-top: 72px; padding-bottom: 8px; }
.lab-grid { columns: 3; column-gap: 8px; }
.lab-card { display: inline-block; width: 100%; margin: 0 0 8px; break-inside: avoid; vertical-align: top; }
.lab-media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #deded9; overflow: hidden; isolation: isolate; }
.lab-card--portrait .lab-media { aspect-ratio: 9 / 16; }
.lab-media img, .lab-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lab-media img { object-fit: cover; }
.lab-media iframe { z-index: 1; }
.lab-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; border: 0; background: transparent; color: white; cursor: pointer; }
.lab-play::before { content: ""; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(20,20,20,.55); transition: transform .2s, background .2s; }
.lab-play::after { content: ""; position: absolute; left: calc(50% + 3px); top: 50%; transform: translate(-50%, -50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid white; }
.lab-play:hover::before { transform: scale(1.08); background: rgba(20,20,20,.8); }
.lab-play:focus-visible { outline: 2px solid white; outline-offset: -5px; }
@media (max-width: 900px) {
  .lab-grid { columns: 2; }
}
@media (max-width: 620px) {
  .lab-work { padding-top: 54px; padding-bottom: 6px; }
  .lab-grid { columns: 1; column-gap: 0; }
  .lab-card { margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .lab-page a, .lab-play::before { transition: none; } }