.proj{padding:14vh 0 10vh;background:linear-gradient(180deg,#eceef2,#e6e7f1)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:7vh}
.card{position:relative;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(90,80,160,.14);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-12px);box-shadow:0 36px 80px rgba(224,53,154,.25)}

.art{height:200px;position:relative;overflow:hidden;background:var(--a)}
.art i{position:absolute;border-radius:50%;filter:blur(22px);animation:drift 9s ease-in-out infinite alternate}
.art::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(30,20,60,.5) 1px,transparent 1.4px);background-size:4px 4px;mix-blend-mode:soft-light;opacity:.75}
.card:hover .art i{animation-duration:3s}

.card .in{padding:24px 24px 28px;flex:1;display:flex;flex-direction:column}
.card h3{font-family:var(--serif);font-weight:400;font-size:26px;margin-bottom:4px}
.card .tag{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mag);margin-bottom:12px}
.card p{font-size:15px;line-height:1.65;color:#444661}
.card a.go{margin-top:auto;padding-top:18px;font-size:14px;color:var(--mag);text-decoration:none;font-weight:500}
.card a.go:hover{text-decoration:underline}

.badge{position:absolute;top:14px;left:14px;z-index:2;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);color:var(--mag);font-weight:700}