/* Grow over the neighboring cards without moving the grid or footer. */
.project-card {
  transform-origin: center bottom;
  transition: transform .28s cubic-bezier(.2,.75,.25,1), border-color .2s, box-shadow .28s;
}
.project-card:is(:hover, :focus-visible) {
  z-index: 5;
  color: #fff;
  border-color: #6595ff;
  box-shadow: inset 0 0 0 2px #6595ff40, 0 18px 45px #0008;
}
@media (min-width: 1101px) {
  .project-card:first-child { transform-origin: left bottom; }
  .project-card:last-child { transform-origin: right bottom; }
  .project-card:focus-visible { transform: translateY(-6px) scale(1.6); }
}
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .project-card:hover { transform: translateY(-6px) scale(1.6); }
}
@media (max-width: 1100px) and (hover: hover) and (pointer: fine) {
  .project-card:hover { transform: translateY(-4px) scale(1.05); }
}
@media (hover: none) {
  .project-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .project-card { transition: none; }
}