last-of-typeが効かない理由が分からない

2つある「modal__desc」の内の、2つ目の方の文字色を赤色に変えたいのですが、
その際にlast-child、last-of-type、nth-of-type(2)を試したのですが、
last-of-typeのみうまくいきませんでした。

MDNでlast-of-typeについて調べると、下記のような説明でした。

兄弟要素のグループの中でその種類の最後の要素

MDN:last-of-type

「modal__desc」は2つ兄弟要素として存在しており、自2つ目の「modal__desc」は最後の要素なので、
自分なりには上記の条件を満たしていると思うのですが、
last-of-typeが動かない意味が分からず、ご教示いただきたく存じます。

        <div class="modal" id="modal">
                <div class="modal__inner inner">
                    <h3 class="modal__ttl section__ttl">プライバシーポリシー</h3>
                    <div class="modal__desc">
                        <h4 class="modal__desc-ttl">ほにゃらら</h4>
                        <p class="modal__desc-txt">
                            ほにゃららほにゃららほにゃららほにゃららほにゃら
                        </p>
                    </div>
                    <div class="modal__desc">
                        <h4 class="modal__desc-ttl">ほにゃらら</h4>
                        <p class="modal__desc-txt">
                            ほにゃららほにゃららほにゃららほにゃららほにゃら
                        </p>
                    </div>
                </div>
            </div>

    &__desc {
		//modal__descの2つ目の色を赤くする

		//①2つ目の色が変わる
        &:nth-of-type(2) {
            color: red;
        }
		//②2つ目の色が変わる
        // &:last-child{
        //     color: red;
		// }
		//③2つ目の色が変わらない
        // &:lastoftype{
        //     color: red;
        // }

全体的なソースは下記の通りです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
        <div class="modal" id="modal">
                <div class="modal__inner inner">
                    <h3 class="modal__ttl section__ttl">プライバシーポリシー</h3>
                    <div class="modal__desc">
                        <h4 class="modal__desc-ttl">ほにゃらら</h4>
                        <p class="modal__desc-txt">
                            ほにゃららほにゃららほにゃららほにゃららほにゃら
                        </p>
                    </div>
                    <div class="modal__desc">
                        <h4 class="modal__desc-ttl">ほにゃらら</h4>
                        <p class="modal__desc-txt">
                            ほにゃららほにゃららほにゃららほにゃららほにゃら
                        </p>
                    </div>
                </div>
            </div>
</body>
</html>

//-----------------------------------------------------
// 変数
//-----------------------------------------------------
$c-main: #3f51b5;

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;

    &__inner {
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        margin: auto;
        width: 600px;
        background-color: #fff;
        padding: 0 56.5px 0 83.5px;
    }

    &__ttl {
        font-size: 2.4rem;
        font-weight: bold;
        margin-bottom: 73px;
        padding-top: 65px;

        &::after {
            width: 140px;
            border-width: 3px;
            bottom: -24.5px;
        }
    }

    &__desc {
        margin-bottom: 30px;

        //modal__descの2つ目の色を赤くする

        //①2つ目の色が変わる
        // &:nth-of-type(2) {
        //     color: red;
        // }
        // ②2つ目の色が変わる
        // &:last-child{
        //     color: red;
        // }
        // ③2つ目の色が変わらない
        &:lastoftype{
            color: red;
        }

        &-ttl {
            font-weight: bold;
            font-size: 2rem;
            margin-bottom: 16px;
        }

        &-txt {
            font-size: 1.6rem;
            line-height: 1.625;

        }
	}
}