h2 {
   text-align: center;
}

h2 img {
   margin-inline: auto;
   max-width: 15rem;
}

.search {
   margin-inline: auto;
}

li article header {
   height: stretch;
}

@supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
      /* TODO: can this be simplified to not require the wrapper? */
      li:has( > a > article) {
         --in-view: false;
         animation-name: in-view;
         animation-fill-mode: forwards;
         animation-timeline: view(); /* h/t Kevin Powell */
         animation-range-start: entry 0%;
         animation-range-end: entry 40%;
      }

      li > article,
      li > a > article {
         animation-name: slide-up;
         animation-duration: 500ms;
         animation-fill-mode: forwards;
         animation-play-state: paused;
         /* TODO; actually support stagger; prob use sibling index mod col count */
         animation-delay: calc(var(--stagger, 0s) * 0.25s);

         @container style(--in-view: true) {
            animation-play-state: running;
         }
      }

      @keyframes in-view {
         from {
            --in-view: false;
         }
         to {
            --in-view: true;
         }
      }

      @keyframes slide-up {
         from {
            opacity: 0;
            translate: 0 2rem;
         }
         to {
            opacity: 1;
            translate: 0 0;
         }
      }
   }
}