.course-list-container{max-width:1200px;margin:0 auto;padding:32px 16px}.hero-section{text-align:center;margin-bottom:48px}.hero-section h1{color:var(--color-primary);margin:0 0 8px;font-size:36px;font-weight:700}.subtitle{color:#666;margin:0;font-size:16px}.courses-grid{grid-template-columns:repeat(4,1fr);gap:24px;display:grid}.course-card{color:inherit;background:#fff;border-radius:8px;text-decoration:none;transition:transform .2s,box-shadow .2s;display:block;overflow:hidden;box-shadow:0 2px 8px #00000014}.course-card:hover{transform:translateY(-4px);box-shadow:0 4px 16px #0000001f}.course-thumbnail{background:#f0f0f0;width:100%;height:160px;position:relative;overflow:hidden}.course-thumbnail img{object-fit:cover;width:100%;height:100%}.course-badge{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;padding:4px 12px;font-size:12px;font-weight:600;position:absolute;top:8px;right:8px}.course-info{padding:16px}.course-title{color:#1a1a1a;margin:0 0 8px;font-size:16px;font-weight:600;line-height:1.4}.course-instructor{color:#666;margin:0 0 12px;font-size:14px}.course-meta{color:#888;gap:16px;font-size:13px;display:flex}.meta-item{align-items:center;gap:4px;display:flex}@media (max-width:1024px){.courses-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.hero-section h1{font-size:28px}.courses-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.courses-grid{grid-template-columns:1fr}}