.project-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.project-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  flex-direction: column;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  }

  &.featured {
    grid-column: 1 / -1; // Span full width
  }

  mat-card-header {
    padding-bottom: 1rem;
  }

  mat-card-content {
    flex-grow: 1; // Ensure content area expands
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  mat-chip-set {
    padding-top: 1rem;
  }

  mat-card-actions {
    margin-top: auto; // Push actions to the bottom
  }
}

.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* Or a height that fits your design */
  background-color: #f0f0f0; /* A light background for the icon */
}

.fallback-icon {
  font-size: 4rem;
  width: 4rem;
  height: 4rem;
  color: #666;
}

// Ensure images don't exceed the card width and maintain aspect ratio
img[mat-card-image] {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
