@layer components {
    .commitment-card {
        padding: var(--spacing-16) var(--spacing-12) var(--spacing-8);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-6);
        border-radius: 50%;
        aspect-ratio: 1;
        align-items: center;
    }

    .commitment-card-icon {
        height: 2rem;
        width: 2rem;
    }
    .commitment-card-title {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-black);
        color: var(--color-black);
        text-align: center;
        line-height: var(--line-height-tight);
    }
    .commitment-card-description {
        font-size: var(--font-size-xl);
        color: var(--color-black);
        text-align: center;
        margin: 0;
    }

    .commitment-card-red {
        background-color: var(--apple-red);
        color: var(--color-black);
    }

    .commitment-card-yellow {
        background-color: var(--apple-yellow);
    }

    .commitment-card-green {
        background-color: var(--apple-green);
        color: var(--color-black);
    }
}