.project { position: relative; display: block; min-width: 0; }
.project__visual { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 261 / 380; overflow: hidden; background: #f4f3ef; background: color-mix(in srgb, var(--client-accent, #444) 8%, #fff); }
.project__visual img { position: absolute; inset: 26% 12% auto; width: 76%; height: 39%; object-fit: contain; mix-blend-mode: multiply; transform: translate3d(var(--logo-shift-x, 0px), var(--logo-shift-y, 0px), 0) scale(var(--logo-scale, 1)); transition: scale 380ms cubic-bezier(.16,1,.3,1); }
.project__caption { position: absolute; left: 10%; right: 10%; bottom: 10%; display: block; padding-top: 10%; border-top: 1px solid #ccc; color: #242424; }
.project__caption strong { display: block; font-size: clamp(11px, .72vw, 18px); font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.project__caption small { display: block; margin-top: 4px; color: #626262; font-size: clamp(9px, .57vw, 14px); line-height: 1.5; }
.project__arrow { position: absolute; right: 0; bottom: 0; color: #666; font-size: 15px; }
.project__fallback { padding: 24px; color: #242424; font-size: 18px; line-height: 1.5; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .project:hover .project__visual img { scale: 1.065; }
  .project:hover .project__arrow { color: var(--hmc-red); }
  .pointer-experience-enabled .project { cursor: none; }
}
.project:focus-visible .project__arrow { color: var(--hmc-red); }
@media (max-width: 767px) { .project__caption strong { font-size: 12px; } .project__caption small { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .project__visual img { transition-duration: 100ms; } .project:hover .project__visual img { scale: 1.02; } }