.content-grid{gap:var(--spacing-xl);display:grid}.content-grid-2{grid-template-columns:repeat(2,1fr)}.content-grid-3{grid-template-columns:repeat(3,1fr)}.content-grid-4{grid-template-columns:repeat(4,1fr)}.content-card{transition:all var(--transition-slow);cursor:pointer;border-radius:12px;position:relative;overflow:hidden}.content-card:before{content:"";background:var(--gradient-card);opacity:0;transition:opacity var(--transition-base);pointer-events:none;z-index:0;position:absolute;inset:0}.content-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-8px)}.content-card:hover:before{opacity:1}.content-card-image-container{width:100%;height:220px;position:relative;overflow:hidden}.content-card-image{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-slow)}.content-card:hover .content-card-image{transform:scale(1.05)}.content-card-overlay{padding:var(--spacing-lg);background:linear-gradient(#0000 0%,#0a0e1acc 100%);align-items:flex-end;display:flex;position:absolute;inset:0}.content-card-tag{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;padding:var(--spacing-xs)var(--spacing-md);background:var(--gradient-primary);color:var(--color-text-primary);border-radius:20px;font-weight:700}.content-card-content{padding:var(--spacing-lg);z-index:1;position:relative}.content-card-title{font-size:var(--font-size-xl);margin-bottom:var(--spacing-sm);color:var(--color-text-primary);font-weight:700}.content-card-description{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-md);line-height:1.6}.content-card-link{align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--color-accent-blue);transition:all var(--transition-fast);font-weight:600;display:inline-flex}.content-card-link:hover{color:var(--color-accent-cyan);gap:var(--spacing-sm)}.content-card-link svg{transition:transform var(--transition-fast)}.content-card-link:hover svg{transform:translate(4px)}@media (max-width:1024px){.content-grid-3,.content-grid-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.content-grid,.content-grid-2,.content-grid-3,.content-grid-4{gap:var(--spacing-lg);grid-template-columns:1fr}.content-card-image-container{height:200px}}