/* ==========================================
   CARD COMPONENT
========================================== */

.card {
    position: relative;
    background: var(--color-white);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition:
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.card--selectable {
    cursor: pointer;
}

.card--selectable:hover {
    background: rgba(255,193,7,.05);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.card--featured {
    border-color: var(--color-primary);
}

.card--selected {
    background: rgba(255,193,7,.08);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}