BANNER CSS

Neste curso de mobile tive um pouco de dificuldade de entender, ainda me parece muito complexo. Mas ao decorrer das aulas fui clareando melhor, porém me senti desconfortável pois tiver que "colar" do professor algumas coisas pra finalizar o exercício.

.banner {
    background: var(--azul-degrade);
    color: var(--branco);
    text-align: center;
    padding: 2.5em 2em;
}

banner__titulo {
    font-size: 18px;
    font-weight: 700;
}

.banner__texto {
    font-weight: 500;
    margin: 1em 0;
}

.banner__pesquisa {
    background-color: transparent;
    border: 1px solid var(--branco);
    color: var(--branco);
    border-radius: 24px;
    padding: 1em;
    width: 100%;
}

.banner__pesquisa::placeholder {
    font-family: var(--fonte-principal);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: var(--branco);
    background-image: url(../img/Pesquisa.svg) no-repeat;
    background-position: 1em;
    
}