[Sugestão] Me desafiei a realizar o banner antes da aula.

Como estudo, tentei programar o banner antes de assistir a aula. Espero que o resultado funcione com as futuras linhas de código.

index.html

<!-- código anterior-->
        <section class="banner">
            <h2 class="banner__titulo">Já sabe por onde começar?</h2>
            <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
            <p class="banner__pesquisa"><img src="./img/Pesquisa.svg"> Qual será sua próxima leitura?</p>
        </section>

banner.css

.banner{
    background: var(--azul-degrade);
    color: var(--branco);
    display: flex;
    flex-direction:column;
    
    align-items: center;
    
    padding: 2.5em 2em;
    gap: 1em;
}

.banner__titulo{
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.banner__texto{
    font-weight: 500;
    text-align: center;
    line-height: 1.5em;
}

.banner__pesquisa{
    font-size: 14px;
    font-weight: 300;
    width: 270px;
    height: 20px;
    display:flex;
    justify-content: space-around;
    align-items: center;
    border: solid 1px var(--branco);
    border-radius: 24px;
    padding: 0.8em 3em;
}