:root{
  --work-max-width:1200px;
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body{font-family:var(--body-font);}

.work-section{
  width:100%;
  background:#f2f2f2;
  padding:80px 20px 120px;
}

.work-container{
  max-width: var(--work-max-width);
  margin:0 auto;
}

.work-heading{
  font-size:32px;
  font-weight:700;
  margin:0 0 40px 0;
  color:#0b0b0b;
}

.projects-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:48px;
}

.project-card{
  background:transparent;
  cursor:pointer;
}

.project-media{
  width:100%;
  aspect-ratio: 4 / 3;
  background-size:cover;
  background-position:center;
  border-radius:8px;
  transition:transform 300ms ease, filter 300ms ease;
}

.project-card:hover .project-media{
  transform: scale(1.04);
}

.project-title{
  font-size:20px;
  font-weight:600;
  margin:12px 0 8px 0;
  color:#0b0b0b;
}

.project-desc{
  font-size:15px;
  color:#666666;
  margin:0;
  line-height:1.4;
  max-height:2.8em; /* ~2 lines */
  overflow:hidden;
}

@media (max-width: 1024px){
  .projects-grid{ grid-template-columns: repeat(2, 1fr); gap:40px; }
  .work-heading{ font-size:28px; }
}

@media (max-width: 767px){
  .projects-grid{ grid-template-columns: 1fr; gap:28px; }
  .work-section{ padding:40px 16px 80px; }
  .work-heading{ font-size:24px; margin-bottom:24px; }
}