/* Use the supplied artwork for the timeline while keeping the hero introduction live. */
.how-page .work-hero {
  position:relative;
  height:auto;
  min-height:0;
  padding:0;
  background:#03152a;
}
.how-page .work-hero-image {
  display:block;
  width:100%;
  height:auto;
}
.how-page .work-hero-copy {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  pointer-events:none;
}
.how-page .work-hero-copy > * {
  width:55%;
}
.how-page .work-hero-copy p {
  max-width:660px;
}
.how-page .work-hero-copy h1 em,
.how-page .work-hero-copy .work-eyebrow {
  color:var(--lime);
}
.how-page .work-artwork-photo { height:auto; aspect-ratio:auto; object-fit:contain; }

@media(max-width:760px) {
  .how-page .work-hero { display:flex; flex-direction:column; }
  .how-page .work-hero-image { order:2; }
  .how-page .work-hero-copy {
    position:relative;
    inset:auto;
    order:1;
    padding:36px 0;
    pointer-events:auto;
  }
  .how-page .work-hero-copy > * { width:100%; }
  .how-page .work-hero-copy h1 { font-size:36px; }
  .how-page .work-hero-copy p { font-size:14px; line-height:1.65; margin-top:16px; }
  .how-page .work-hero-copy .work-eyebrow { font-size:12px; margin-bottom:12px; }
}