.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;padding:20px 0}.modern-portfolio-card{position:relative;overflow:hidden;border-radius:12px;background:var(--white);box-shadow:0 4px 15px rgba(0,0,0,.05);transition:all .3s ease;height:320px;border:1px solid rgba(102,136,245,.1);display:flex;flex-direction:column}.modern-portfolio-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(102,136,245,.15);border-color:var(--primary)}.modern-portfolio-image-container{flex:1;width:100%;overflow:hidden;position:relative;background:#f8f9fa}.modern-portfolio-image{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease}.modern-portfolio-card:hover .modern-portfolio-image{animation:scrollImageCompact 6s linear infinite alternate}@keyframes scrollImageCompact{0%{object-position:top}to{object-position:bottom}}.modern-portfolio-content{padding:12px 15px;background:var(--white);border-top:1px solid rgba(0,0,0,.03);display:flex;justify-content:space-between;align-items:center;height:50px}.modern-portfolio-title{font-size:14px;font-weight:600;color:var(--dark);margin:0;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:85%}.modern-portfolio-card:hover .modern-portfolio-title{color:var(--primary)}.modern-portfolio-arrow{font-size:12px;color:var(--lightGrey);transition:all .3s ease;opacity:.7}.modern-portfolio-card:hover .modern-portfolio-arrow{color:var(--primary);transform:translateX(3px);opacity:1}@media (max-width:768px){.portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.modern-portfolio-card{height:280px}}