@layer components {
    .anatomy-item {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        padding: var(--space-lg);
        background-color: color-mix(in srgb, var(--clr-slate-900), transparent 50%);
        border: var(--border-thin) solid var(--clr-slate-800);
        border-radius: var(--radius-xl);
        transition: border-color 0.3s ease;

        @media (min-width: 768px) {
            flex-direction: row;
            align-items: center;
        }

        &:hover {
            border-color: color-mix(in srgb, var(--color-primary), transparent 70%);
        }

        & .anatomy-item__number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            background-color: var(--clr-slate-800);
            color: var(--color-primary);
            font-weight: 700;
            border-radius: var(--radius-sm);
            flex-shrink: 0;
        }

        & .anatomy-item__info {
            flex: 1;
        }

        & .anatomy-item__title {
            color: var(--color-white);
            font-weight: 600;
            font-size: var(--text-lg);
            margin: 0;
        }

        & .anatomy-item__description {
            color: var(--color-text-muted);
            font-size: var(--text-sm);
            margin: 0;
        }

        & .anatomy-item__example {
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-sm);
            border: var(--border-thin) solid var(--clr-slate-800);
            font-family: monospace;
            font-size: var(--text-sm);
            color: #4ade80; /* green-400 */
            word-break: break-word;

            @media (min-width: 768px) {
                width: auto;
                max-width: 20rem;
            }
        }
    }
}