Não consegui Estilizar

HTML:

 <section id="curiosidades">
            <div>
                <img src="imagens/pedra-e-flor.jpeg" alt="">
            </div>
            <div>
                <h3>É sobre bem estar</h3>
                <h4>Cuide do seu corpo e leve boas memórias consigo.</h4>
                <p>Carregue com você o bem-estar, onde estiver. Leve o conforto do SPA para a sua casa. Confira nossas opções de sabonetes, sais de banho e velas para presentear você mesmo ou quem você ama. </p>
            </div>
        </section>
    </main>
    <footer>
        Estilizado com Sass e com <i class="fas fa-heart"></i>
    </footer>

</body>

</html>

ARQUIVO _CURIOSIDADES.SCSS:

@import '../abstract/variaveis';

#curiosidades {
    padding: 1rem;
    text-align: center;
    margin: 5px;
    h3 {
        color: $cor-primaria;
        font-size: $tamanho-do-texto/2.5;
    }
    h4 {
        color: $cor-secundaria;
        font-size: $tamanho-do-texto/3;
    }
    p {
        margin-top: 5px;
        color: $cor-primaria;
    }
}

ARQUIVO FOOTER.SASS:

import styles\abstract\_variaveis.scss

   @mixin bg-cores ($cores...)
      background: linear-gradient(to left, $cores)
      

footer
   text-align: center
   font-size: $tamanho-do-texto /2
   border-top: 2px solid $cor-primaria
   margin-top: 1rem
   padding: 1.2rem
   @include bg-cores ($cor-primaria, $cor-secundaria, $cor-terciaria, $cor-primaria: ,...)
   
   i
            color: red
            

ARQUIVO STYLE.SCSS

// importação dos estylos da partial _base.scss
@import './abstract/base';
@import './components/navbar';
@import './components/banner';
@import './components/servicos';
@import './components/cupom';
@import './components/curiosidades';
@import './components/footer.sass';