.card {
    background-color: var(--white);
    border-radius: var(--golden-xs);
    padding: var(--golden-m);
    margin-bottom: var(--golden-m);
    box-shadow: var(--box-shadow);
    transition: box-shadow 0.2s ease;

    &:hover {
        box-shadow: var(--golden-xs) var(--golden-xs) var(--golden-m) rgba(0, 0, 0, 0.1);
    }
}

.card h1 {
    margin-top: 0;
    margin-bottom: var(--golden-xs);
}

.card p {
    margin: 0;
}

/* Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--golden-m);
    margin: var(--golden-m) 0;
}

/* Compact card variant */
.card.compact {
    padding: var(--golden-s);
}

/* Highlighted card */
.card.highlight {
    border: 2px solid var(--pink);
}