/* ================================
   PORTFOLIO COMPONENT
   ================================ */

.portfolio {
  padding: 3rem 0 6rem;
  text-align: center;
}

.portfolio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  margin-top: 2rem;
}

.portfolio-item {
  flex: 1 1 calc(33.333% - 32px);
  max-width: 320px;
  position: relative;
}

.portfolio-item img {
  width: 100%;
  display: block;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.portfolio-item:hover img {
  transform: scale(1.03);
}

.portfolio-item h2 {
  font-size: 1rem;
  color: #111;
  margin-top: 12px;
}

/* Responsive */
@media (max-width: 900px) {
  .portfolio-item {
    flex: 1 1 calc(50% - 32px);
  }
}

@media (max-width: 600px) {
  .portfolio-item {
    flex: 1 1 100%;
  }
}