.logo-wall{
  display:block;
  width:100%;
  background:#f4f4f4;
}
.composition-band{
  position:relative;
  width:100%;
  overflow:hidden;
}
.row-artwork{
  position:absolute;
  inset:0;
}

.logo-piece{
  position:absolute;
  overflow:hidden;
  cursor:default;
}
.logo-piece img{
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
}
.logo-piece--drift{
  overflow-anchor:none;
}
.logo-piece--drift img{
  position:absolute;
  top:50%;
  width:100%;
  height:auto;
  transform:translate3d(0,calc(-50% + var(--drift-y,0px)),0) scale(1.1);
  transform-origin:center;
}
@supports (animation-timeline: view()){
  .composition-band--lead{
    view-timeline-name:--logo-drift;
    view-timeline-axis:block;
  }
  .logo-piece--drift img{
    animation:logo-drift linear both;
    animation-timeline:--logo-drift;
    animation-range:cover;
    will-change:transform;
  }
  @keyframes logo-drift{
    from{ transform:translate3d(0,-61.05%,0) scale(1.1); }
    to  { transform:translate3d(0,-38.95%,0) scale(1.1); }
  }

  @media (prefers-reduced-motion:reduce){
    .logo-piece--drift img{
      animation:none;
      transform:translate3d(0,-50%,0) scale(1.1);
      will-change:auto;
    }
  }
}
.logo-hero .top{grid-template-columns:1fr;}