.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.case-card{
  background:#fff;
  border:1px solid var(--cream2);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow2);
  transition:.25s ease;
}
.case-card:hover{
  transform:translateY(-6px);
  border-color:rgba(200,169,90,.65);
  box-shadow:var(--shadow);
}

.case-image{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#151515;
}
.case-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.case-card:hover .case-image img{transform:scale(1.04)}

.case-tag{
  position:absolute;
  left:18px;
  top:18px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(15,15,15,.88);
  color:var(--gold);
  border:1px solid rgba(200,169,90,.35);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.case-body{padding:27px}
.case-body h3{
  font-family:'Outfit',sans-serif;
  font-size:21px;
  margin-bottom:11px;
}

.case-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:20px 0;
}
.case-meta div{
  background:var(--cream);
  border-radius:14px;
  padding:12px 10px;
  text-align:center;
}
.case-meta strong{
  display:block;
  color:var(--ink);
  font-size:16px;
}
.case-meta small{
  color:var(--muted2);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}

.case-result{
  border-top:1px solid var(--cream2);
  padding-top:17px;
  color:var(--muted);
  font-size:14px;
}
.case-result strong{color:var(--ink)}

@media(max-width:1100px){
  .portfolio-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:720px){
  .portfolio-grid{grid-template-columns:1fr}
}