.project-recording-button { display: block; width: 100%; padding: 0; border: 0; background: #111; cursor: pointer; }
.project-recording { display: block; width: 100%; height: auto; aspect-ratio: 1918 / 982; object-fit: contain; }
.project-recording-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.brs-gallery { margin-top: 10px; }
.brs-screen + .carousel-controls { margin-top: 40px; }
.motion-portfolio { overflow: clip; background: #111; color: #f8f9f7; }
.motion-portfolio .index { color: #b7c0ff; border-color: #444; }
.motion-portfolio h2 { max-width: 18ch; }
.motion-intro { max-width: 64ch; color: #bfc1c4; margin: 30px 0 48px; }
.project-coverflow { --step: 260px; height: 550px; }
.project-coverflow > figure { top: 35px; width: min(var(--card-width), 76vw); }
.project-coverflow .image-button, .project-coverflow .skyza-film { width: 100%; height: auto; aspect-ratio: var(--media-ratio); border-radius: 4px; }
.project-coverflow img, .project-coverflow video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.project-coverflow figcaption { color: inherit; padding-top: 16px; font-size: 12px; }
.brs-gallery { height: 550px; --step: 440px; }
.brs-gallery > figure { width: min(var(--card-width), 82vw); }
.brs .carousel-controls button { color: var(--blue); }
.brs-gallery .image-button img { aspect-ratio: auto; }
@media (max-width: 900px) {
  .project-coverflow { --step: 240px; }
  .brs-gallery { --step: 410px; height: 550px; }
}
@media (max-width: 600px) {
  .project-coverflow { --step: 61vw; height: 560px; }
  .project-coverflow > figure { width: min(var(--card-width), 72vw); }
  .brs-gallery { --step: 70vw; height: 430px; }
  .brs-gallery > figure { width: 86%; }
  .motion-intro { font-size: 14px; margin-bottom: 32px; }
}
@media (max-width: 420px) { .brs-gallery { height: 330px; } }
@media (prefers-reduced-motion: reduce) {
  .project-coverflow > figure { transition: none; }
}