하위 클래스는 grid-area인식이 안되나요?

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 40px;
    grid-template-areas:
        "avatar icon     icon     ......"
        "avatar welcome  welcome  ......"
        "avatar point1   point2   close";

    .avatar {
        grid-area: avatar;
    }

    .icon {
        grid-area: icon;
    }

    .welcome {
        grid-area: welcome;
    }

    .box {
        .point1 {
            grid-area: point1;
        }

        .point2 {
            grid-area: point2;
        }
    }
}

이 코드에서 .point1과 .point2가 ...... 자리에 들어가는데요

혹시 하위 클래스는 grid-area인식이 안되나요?