@layer components {
    /* 
     * Cards (Panels / Content Wrappers)
     */
    .card {
        background-color: var(--white);
        border: var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        padding: var(--space-3);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-bottom: var(--space-3);
    }

    .card-p {
       font-size: var(--text-small); 
       font-weight: var(--font-weight-semibold); 
       color: var(--color-muted);
       text-transform: uppercase; 
       letter-spacing: 0.05em;
       margin-block-end: var(--space-1);
    }

    .card-image {
        max-width: 10rem;
        border-radius: var(--radius-md);
    }
}