.card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid transparent;
    margin-top: 5px;
    transition: var(--transition-normal);
}

.card-sm {
    padding: 1rem;
}

.card-md {
    padding: 1.5rem;
}

.card-lg {
    padding: 2rem;
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--clr-primary);
}



.card-header {
    margin-bottom: 1rem;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.card-footer {
    margin-top: 1.5rem;
}