.video-portfolio { background: #000; padding: 50px 5%; font-family: sans-serif; } .hero-header { text-align: center; color: white; margin-bottom: 50px; } .hero-header h1 { font-size: 3rem; margin-bottom: 10px; } .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; } .video-card { position: relative; height: 250px; border-radius: 15px; overflow: hidden; border: 2px solid #222; transition: 0.4s; } .video-card:hover { border-color: #00d4ff; transform: scale(1.03); } .video-card video { width: 100%; height: 100%; object-fit: cover; } .info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); color: white; } .info h3 { margin: 0; font-size: 1.1rem; }