/* Project Card Styles */ .project-image { position: relative; overflow: hidden; aspect-ratio: 16/9; } .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); } .group:hover .project-image img { transform: scale(1.1); } /* Project overlay */ .project-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%, transparent 100%); opacity: 0; transition: opacity var(--transition-normal); } .group:hover .project-overlay { opacity: 1; } .project-overlay-content { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; } /* Project content */ .project-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); } .project-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-md); transition: color var(--transition-fast); } .group:hover .project-title { color: var(--color-primary); } .project-description { color: var(--text-secondary); margin-bottom: var(--space-lg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .project-technologies { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-lg); } .project-actions { display: flex; align-items: center; justify-content: space-between; }