/* Stationary grid cell; tilt and the existing card reveal use separate layers. */
.shop-tilt-target {
  display: flex;
  min-width: 0;
  perspective: 900px;
}

.shop-tilt-plane {
  display: flex;
  min-width: 0;
  width: 100%;
  transform-origin: center;
  transition: box-shadow 220ms ease;
}

.shop-tilt-plane > .shop-card {
  width: 100%;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .shop-tilt-target[data-shop-tilt="active"] > .shop-tilt-plane {
    box-shadow: 0 9px 20px #181a1d1f;
    will-change: transform;
  }
}