/* Focus — "The craft behind the cut": the text beside a horizontal film. The film sets the height of the row, and the
   text spreads to meet it, so the eyebrow starts at the film's top edge and the lead ends at its bottom edge. */

.craft__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 96px);
}
.craft__text { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.craft__text h2 em { display: block; }
.craft__text .section__lead { margin-top: 0; }

.craft__film {
  display: grid;
  place-items: center;
  align-self: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.craft__film .i { width: 84px; height: 84px; padding: 24px; border-radius: 50%; background: var(--surface-2); color: var(--text); }

@media (max-width: 860px) {
  .craft__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .craft__text .section__lead { margin-top: 0; }
  .craft__film { border-radius: 18px; }
  .craft__film .i { width: 64px; height: 64px; padding: 18px; }
}