.article-hero{aspect-ratio:16 / 10;background-attachment:scroll;transition:background-color .3s ease}.article-hero.scrolled{background-color:#667eeaf2}.article-hero .breadcrumb,.article-hero h1{will-change:transform,opacity;transition:transform .05s linear,opacity .1s ease}.video-section{background:#f8f9fa;padding:40px;border-radius:12px;margin:40px 0}.video-section h3{color:#2d3748;font-size:1.3rem;margin-bottom:30px;display:flex;align-items:center;gap:10px}.videos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}.video-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000001a;transition:all .3s ease}.video-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px #667eea33}.video-thumbnail{width:100%;height:180px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:50px;color:#fff;position:relative}.video-play-btn{width:60px;height:60px;background:#ffffffe6;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#667eea;transition:all .3s ease}.video-card:hover .video-play-btn{background:#fff}.video-info{padding:20px}.video-info p{color:#667eea;font-weight:600;margin:0;font-size:.9rem}.video-link{display:inline-flex;align-items:center;gap:8px;color:#667eea;text-decoration:none;font-weight:600;margin-top:10px;transition:all .3s ease}.video-link:hover{color:#764ba2;transform:translate(5px)}@media(max-width:768px){.videos-grid{grid-template-columns:1fr}}@media(max-width:480px){.article-hero{aspect-ratio:3 / 4}.article-hero .breadcrumb,.article-hero h1{transition:transform .08s linear,opacity .15s ease}}
