/* Public channel films, within the existing Work table typography and palette. */
.motion-collection { margin: 105px 4.8% 0; scroll-margin-top: 32px; }
.motion-collection-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.motion-collection-heading h2 { font-size: 38px; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.motion-collection-heading a { font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.motion-collection-info { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 12px; margin-bottom: 24px; }
.motion-films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
.motion-film { min-width: 0; }
.motion-film a { display: block; }
.motion-film-image { position: relative; overflow: hidden; background: var(--line); }
.motion-film-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.motion-film-play { position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; display: grid; place-items: center; padding-left: 2px; border: 1px solid #ffffffb3; border-radius: 50%; background: #0005; color: #fff; font-size: 11px; }
.motion-film-meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 14px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.motion-film h3 { font-size: 21px; font-weight: 500; line-height: 1.35; letter-spacing: -.015em; margin: 6px 0 0; overflow-wrap: anywhere; }
.motion-film a:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
@media (max-width: 1000px) {
  .motion-films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .motion-collection { margin: 65px 6% 0; scroll-margin-top: 24px; }
  .motion-collection-heading { gap: 16px; margin-bottom: 22px; }
  .motion-collection-heading h2 { font-size: 30px; }
  .motion-collection-heading a { font-size: 12px; }
  .motion-collection-info { font-size: 11px; margin-bottom: 20px; }
  .motion-films { grid-template-columns: 1fr; gap: 34px; }
  .motion-film-meta { font-size: 11px; margin-top: 12px; }
  .motion-film h3 { font-size: 20px; }
}