.web-project-grid{display:grid;gap:32px}
.web-project{overflow:hidden;border:1px solid rgba(255,255,255,.9);border-radius:32px;background:#f9fbfc;box-shadow:0 32px 90px -42px rgba(14,23,41,.35)}
.web-project-visual{overflow:hidden;margin:20px 20px 0;border-radius:20px;background:#fff;box-shadow:0 18px 45px -25px rgba(14,23,41,.35)}
.web-project-visual img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;transition:transform .7s var(--ease)}
.web-project:hover .web-project-visual img{transform:scale(1.025)}
.web-project-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.65fr);gap:24px;align-items:end;padding:clamp(28px,4vw,46px)}
.web-project-number{font:600 12px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--violet)}
.web-project h3{margin:12px 0 0;font-size:clamp(33px,4vw,54px);font-weight:800;line-height:1;letter-spacing:-.045em}
.web-project-detail p{margin:0;color:var(--muted);font-size:17px}
.web-project-detail a{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;font-weight:700;text-decoration:none}
.web-project-detail a:hover{text-decoration:underline}
.web-project-film{background:#111926;border-color:#273348;color:#fff}
.web-project-film .web-project-visual{background:#080b12}
.web-project-film .web-project-number{color:#a8bbff}
.web-project-film .web-project-detail p{color:#c1cada}
.web-project-film .web-project-detail a{color:#a8bbff}
@media(max-width:700px){
  .web-project-grid{gap:22px}
  .web-project{border-radius:24px}
  .web-project-visual{margin:12px 12px 0;border-radius:14px}
  .web-project-body{grid-template-columns:1fr;gap:18px;padding:24px}
}
@media(prefers-reduced-motion:reduce){.web-project-visual img{transition:none}}