.mist-band{
  --band-h: clamp(190px, 23vw, 400px);
  --band-over: 1.5;
  --mist-depth: 62%;
  --mist-colour: 23,25,29;

  position:relative;
  display:block;
  width:100%;
  height:var(--band-h);
  overflow:hidden;
  overflow-anchor:none;
  font-size:0;
  background:var(--ink);
}

.mist-band img{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:calc(var(--band-h) * var(--band-over));
  object-fit:cover;
  object-position:center;
  display:block;
  transform:translate3d(0,calc(var(--band-h) * (1 - var(--band-over))),0);
  will-change:transform;
}
.mist-band::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(var(--mist-colour),1) 0%,
    rgba(var(--mist-colour),.72) 22%,
    rgba(var(--mist-colour),.28) 44%,
    rgba(var(--mist-colour),0) var(--mist-depth)
  );
}
@supports (animation-timeline: view()) {
  .mist-band{
    view-timeline-name:--mist-band;
    view-timeline-axis:block;
  }
  .mist-band img{
    animation: mist-drift linear both;
    animation-timeline: --mist-band;
    animation-range: cover;
  }
  @keyframes mist-drift{
    from{ transform:translate3d(0,calc(var(--band-h) * (1 - var(--band-over))),0); }
    to  { transform:translate3d(0,0,0); }
  }
  @media (prefers-reduced-motion:reduce){
    .mist-band img{
      animation:none;
      top:50%;
      transform:translate3d(0,-50%,0);
    }
  }
}
@media (max-width:560px){
  .mist-band{--mist-depth:52%;}
}
@media (prefers-reduced-motion:reduce){
  .mist-band img{will-change:auto;}
}