Estilização do Banner

Eu refiz o banner usando flexbox para que o titulo (h2) e o texto (p) fique do lado esquerdo e o input do lado direito.
No HTML:

  <section class="banner">
        <div class="banner__container">
            <h2 class="banner__titulo"> Já sabe por onde começar?</h2>
            <p class="banner__texto">Encontre em nossa estante o que precisa para o seu desenvolvimento!</p>
        </div>
         <input type="search" class="banner__pesquisa" placeholder="Qual será a sua próxima leitura?">
    </section>

No CSS:

@media screen and (min-width:1024px){
    .banner{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .banner__titulo{
        font-size: 36px;
    }
    .banner__container{
        margin-right: 3em;
        width: 30%;
    }
    .banner__pesquisa{
        width: 50%;
    }
}

Resultado: