.listItem {
  --padding: var(--size-7);

  display: grid;
  grid: 100% / 100%;
  place-items: start center;
  position: relative;
  inline-size: clamp(15em, 15cqi, 25em);
  aspect-ratio: var(--ratio-portrait);
  transform: translateY(calc(-2 * var(--padding)));
  z-index: 1;
  contain: layout size style;

  & > img {
    grid-area: 1/ 1;
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--radius-3);
    object-fit: cover;
    object-position: top center;
    z-index: 1;

    box-shadow: var(--shadow-2);
    background: radial-gradient(
        circle at 25% 30%,
        #7772,
        #7774 1em,
        transparent 1em
      ),
      radial-gradient(circle at 85% 15%, #7772, #7774 1em, transparent 1em),
      linear-gradient(165deg, transparent 60%, #555 60%, #333),
      radial-gradient(
        ellipse 5em 2.25em at 0.5em calc(50% - 1em),
        #333 100%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 5em 2.25em at calc(100% - 0.5em) calc(50% + 1em),
        #555 100%,
        transparent 100%
      ),
      linear-gradient(to bottom, #333 50%, #555 50%);

    transform-origin: 50% 0;
    transform: scale(1.15) translateY(calc(-4 * var(--padding)));

    user-select: none;
  }

  & > figcaption {
    --offset: calc(1.5 * var(--padding));
    grid-area: 1/ 1;
    display: grid;
    grid: 6em 3em / 100%;
    align-content: end;
    position: relative;
    inline-size: calc(100% + (3 * var(--padding)));
    block-size: calc(100% + (4 * var(--padding)));
    padding: calc(0.5 * var(--padding)) var(--padding);
    background-color: var(--surface-3);
    border-radius: var(--radius-2);
    transform: translate3d(0, 0, 0);
    clip-path: inset(-1em);
    box-shadow: var(--shadow-2);
    z-index: 0;

    &:focus-within {
      outline: 1px solid var(--text-2);
      outline-offset: 10px;
    }

    & > strong {
      font-size: var(--font-size-5);
      text-align: center;
      text-wrap: balance;
    }

    & > a {
      display: block grid;
      place-content: center;
      background: var(--stone-1);
      color: var(--yellow-4);
      box-shadow: var(--shadow-2);
      border-radius: var(--radius-2);
      transition: var(--duration-quick-2) var(--ease-2) !important;

      &:hover,
      &:focus {
        background: var(--gradient-19);
        color: var(--stone-1);
        text-decoration: none;
      }
    }
  }

  @media all {
    &:not(:hover):not(:focus-within) {
      transform: translateY(0);
      z-index: 0;
      will-change: transform;

      & > img {
        transform: scale(1) translateY(0);
        will-change: transform;
      }

      & > figcaption {
        clip-path: inset(40%);
      }
    }
    @media (prefers-reduced-motion: no-preference) {
      & {
        transition: transform var(--duration-moderate-1) linear;
      }

      & > img {
        transition: transform var(--duration-moderate-1) ease-in-out;
      }

      & > figcaption {
        transition: clip-path var(--duration-moderate-1) ease-in-out;
      }

      &:is(:hover :focus-within) {
        transition-delay: var(--duration-instant) var(--duration-moderate-2);
        z-index: 1;

        & > img {
          transition: transform var(--duration-moderate-1) ease-in-out;
        }
      }
    }
  }
}
