.portfolio-section .grid {
  display:grid; 
  grid-template-columns:1fr; 
  gap:1rem;
}
@media(min-width:576px){ .portfolio-section .grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:992px){ .portfolio-section .grid { grid-template-columns:repeat(3,1fr); } }

/* Card */
.portfolio-section .card {
  display:flex;
  flex-direction:column;
  background:#ffffff; /* light card */
  border-radius:12px;
  overflow:hidden;
  border:1px solid #e6e6e6;
  transition: transform .18s ease, box-shadow .18s ease;
  height:100%;
}
.portfolio-section .card:hover { 
  transform:translateY(-4px); 
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

/* Top icon area like blog images */
.portfolio-section .card .icon-top {
  width:100%;
  height:160px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:60px;
  background: linear-gradient(180deg, rgba(13,110,253,0.08), rgba(13,110,253,0.02));
  color:#0d6efd;
  border-bottom: 1px solid #e6e6e6;
}

/* Text */
.portfolio-section .card .meta {
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.portfolio-section .card .title { font-size:1rem; font-weight:600; margin:0; color:#0b1a2b; }
.portfolio-section .card .desc { font-size:0.93rem; margin:0; color:#6c757d; line-height:1.35; }

/* Section header */
.portfolio-section h2 { color:#0b1a2b; }
.portfolio-section .small-muted { color:#6c757d; font-size:0.875rem; }