.gcb-story.gcb-with-film {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 315px);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(22px, 4vw, 52px);
  background: #faf7f3;
}
.gcb-with-film .gcb-teaser-copy { padding: 0; }
.gcb-with-film .gcb-teaser-copy > p { max-width: 55ch; }
.gcb-with-film .film-field-note {
  display: flex; align-items: center; gap: 16px;
  border-top: 1px solid #d8d0ca; margin-top: 22px; padding-top: 18px;
}
.gcb-with-film .film-still { display: block; flex: 0 0 min(42%, 164px); }
.gcb-with-film .film-still:focus-visible { outline: 3px solid #b90d2b; outline-offset: 3px; }
.gcb-with-film .film-field-note img { width: 100%; height: auto; border-radius: 3px; }
.gcb-with-film .film-field-note p { margin: 6px 0; font-size: 15px; }
.gcb-with-film .film-field-note .gcb-photo-label { position: static; display: block; background: none; padding: 0; color: #635852; font-size: 10px; letter-spacing: .09em; }
.gcb-with-film .film-field-note .gcb-link { margin: 2px 0 0; }
.gcb-with-film .project-film-frame { width: 100%; margin: 0; }
.gcb-with-film .project-film-link, .gcb-with-film video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  overflow: hidden; border-radius: 5px; background: #201e1d; object-fit: contain;
}
.gcb-with-film .project-film-link { position: relative; color: white; }
.gcb-with-film .project-film-link img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gcb-with-film .project-film-play {
  position: absolute; bottom: 14px; left: 14px; display: inline-flex; align-items: center;
  gap: 9px; padding: 9px 15px; border: 1px solid #ffffff80; border-radius: 22px;
  background: #231b1ae8; color: white; line-height: 1.4; font-size: 14px; font-weight: 700;
}
.gcb-with-film .project-film-play::before { content: ""; border-block: 5px solid transparent; border-left: 8px solid currentColor; }
.gcb-with-film .project-film-link:hover .project-film-play { background: #a6102c; }
.gcb-with-film .project-film-link:focus-visible { outline: 3px solid #b90d2b; outline-offset: 4px; }
.gcb-with-film .project-film-frame figcaption { padding-top: 7px; font-size: 12px; }
.gcb-with-film video:fullscreen { width: 100%; height: 100%; object-fit: contain; background: #000; }
@media (max-width: 700px) {
  .gcb-story.gcb-with-film { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 20px; }
  .gcb-with-film .gcb-teaser-copy { display: contents; }
  .gcb-with-film .film-intro { grid-row: 1; }
  .gcb-with-film .film-intro p:last-child { margin-bottom: 0; }
  .gcb-with-film .project-film-frame { grid-row: 2; width: min(100%,315px); justify-self: center; }
  .gcb-with-film .film-field-note { grid-row: 3; margin: 0; }
}