/* Project cards: home grid and "Next project" on case pages */
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  will-change: transform;
  transition: transform .45s var(--spring-a);
}
.card:hover { transform: translateY(-4px); }

/* Home grid: hovering one card fades the others */
.work .card { transition: transform .45s var(--spring-a), opacity .35s ease; }
.work:has(.card:hover) .card:not(:hover) { opacity: .45; }

.card-title {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 1;
  mix-blend-mode: color-burn;
}
.card-title.is-right { left: auto; right: 20px; text-align: right; }
.card-title h2 { font: 500 16px/1.2 "Inter", sans-serif; color: rgba(26, 26, 26, .75); white-space: pre; }
.card-title .sub { font: italic 400 15px/1.2 "Inter", sans-serif; }

.card-media { flex: 1 0 0; width: 1px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }

@media (max-width: 1199.98px) {
  .card-title { left: 10px; }
  .card-title.is-right { right: 10px; }
}

@media (max-width: 809.98px) {
  .card-title h2 { font-size: 14px; }
  .card-title .sub { font-size: 13px; }
  .card-title.is-right { width: 82%; }
  .card-title.is-right h2 { white-space: pre-wrap; }
  .card-title.is-right-phone { left: auto; right: 10px; text-align: right; }
}

/* Next project, at the end of every case page */
.next { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.next-label { font: 500 16px/1.2 "Inter", sans-serif; color: rgba(26, 26, 26, .5); }
.next .card { width: 380px; }

@media (max-width: 809.98px) {
  .next .card { width: 100%; }
}