@layer components {
    .anatomy {
        padding-block: var(--space-3xl);
        background-color: var(--clr-slate-950);

        & .anatomy__header {
            text-align: center;
            margin-bottom: var(--space-2xl);
        }

        & .anatomy__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            border-radius: var(--radius-full);
            background-color: var(--clr-slate-900);
            color: var(--color-primary);
            border: var(--border-thin) solid var(--clr-slate-800);
            margin-bottom: var(--space-md);

            & svg {
                width: 1.5rem;
                height: 1.5rem;
            }
        }

        & .anatomy__title {
            font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
            font-weight: 700;
            color: var(--color-white);
            margin-bottom: var(--space-sm);
        }

        & .anatomy__intro {
            color: var(--color-text-muted);
            max-width: 42rem;
            margin-inline: auto;
            line-height: 1.6;

            & strong {
                color: var(--color-white);
            }
        }

        & .anatomy__items {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        & .anatomy__footer {
            margin-top: var(--space-2xl);
        }
    }
}