/* ── Card Section Hero ────────────────────────────────────────── */
.card-section-hero {
    display: grid; 
    grid-template-columns: 1fr; 
    gap: var(--spacing-xl);
    align-items: center; 
    padding: var(--spacing-xl);
}

@media (min-width: 768px) {
    .card-section-hero { 
        grid-template-columns: 1fr auto; 
        padding: var(--spacing-2xl); 
    }
}