[Sugestão] Sugestão para seguir padrão utilizado até o momento

Nessa aula o instrutor faz a estilização do h4 e do p direto dentro das chaves do #desconto conforme código abaixo:

    #desconto{
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    h4{
        @include mixins.ff-fs-cl(variaveis.$ft-titulos, 1.6rem, variaveis.$cor-primaria);
    }
    p{
        @include mixins.ff-fs-cl(variaveis.$ft-textos, 1.2rem, variaveis.$cor-primaria);
    }
}

Porem, como podemos ver no index.html temos uma div filha de classe = 'desconto-form' que abrage as tags h4 e p.

<section id="desconto">
            <img src="/assets/mandala-esquerda.png" alt="Mandala lado esquerdo">
            <div class="desconto-form">
                <h4>Inscreva-se para ganhar descontos!</h4>
                <p>Cadastre seu email para receber descontos e novidades sobre o espaço e nossos serviços.</p>
                <div class="input-btn">
                    <input type="email">
                    <button type="submit">Inscrever</button>
                </div>
            </div>
            <img src="/assets/mandala-direita.png" alt="Mandala lado direito">
        </section>

Por isso seria interesse que ele utilizasse a abordagem de aninhamento utilizada até o momento do curso para padrozinar e criar uma espécie de boa prática ou estou enganado no meu entendimento?

Obrigado por hora