.gallery-card[data-reflective] {
  --reflect-x: 50%;
  --reflect-y: 35%;
  --reflect-tilt-x: 0deg;
  --reflect-tilt-y: 0deg;
  isolation: isolate;
  transform: perspective(1100px) rotateX(var(--reflect-tilt-x)) rotateY(var(--reflect-tilt-y));
  transform-origin: center;
  transition: transform 260ms cubic-bezier(.2, .7, .2, 1), box-shadow 260ms ease;
}

.gallery-card[data-reflective]::before,
.gallery-card[data-reflective]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
}

.gallery-card[data-reflective]::before {
  border: 1px solid #ffffffb3;
  box-shadow: inset 0 1px 0 #ffffffed, inset 0 -1px 0 #bebec412;
}

.gallery-card[data-reflective]::after {
  opacity: 0;
  background:
    radial-gradient(ellipse 230px 185px at var(--reflect-x) var(--reflect-y), #ffffff47 0%, #ffffff14 30%, #ffffff00 72%),
    linear-gradient(115deg, #ffffff00 18%, #ffffff0d 42%, #ffffff00 66%);
  transition: opacity 260ms ease;
}

.gallery-card[data-reflective].is-reflective-active {
  box-shadow: 0 11px 29px #00000010, 0 3px 12px #00000005;
  transition: transform 110ms ease-out, box-shadow 260ms ease;
}

.gallery-card[data-reflective].is-reflective-active::after { opacity: .55; }
.gallery-card[data-reflective].is-reflective-focused::after { opacity: .22; }
.gallery-card[data-reflective].is-reflective-pressed::after { opacity: .7; }

@media (hover: none) {
  .gallery-card[data-reflective].is-reflective-active { box-shadow: 0 5px 20px #00000008; }
  .gallery-card[data-reflective].is-reflective-pressed::after { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card[data-reflective] {
    transform: none !important;
    transition: none !important;
  }
  .gallery-card[data-reflective]::after { display: none; }
  .gallery-card[data-reflective].is-reflective-active { box-shadow: 0 5px 20px #00000008; }
}