[Dúvida] Como centralizar Este texto com a imagem | HTML e CSS

Como centralizar Este texto com a imagem

CODIGO: HTML

Vagas abertas!

Estamos procurando por talentos

Somos uma equipe 100% remota com pessoas do Brasil inteiro.

        <div class="imagem">
            <img src="/assets/img/Image.png" alt="pessoas no escritório">
        </div>
    </section>

CSS .vagas{ display: flex; flex-direction: column; text-align: center; gap: 20px; padding: 150px 0 90px 0; }

    .vagas__abertas{
        font-family:"Inter",sans-serif ;
        font-size: 12px;
        font-weight: 500;
        color: #8E2424;
    }

    .vagas__titulos_talentos{
        font-family: "Inter", sans-serif;
        font: 600;
        font-size: 19px;
        color:var(--cor-preto);
    }
    .vagas__texto{
        font-family:"Inter",sans-serif;
        font-size: 9px;
        font-weight: 400;
        color: var(--cor-cinza);
    }
    .imagem{
        padding: 4rem 0 0.1rem 0 ;

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá, Rhudimyller! Tudo bem?

Percebi que uma parte do código não foi enviada enquanto você escrevia, então interpretei a estrutura com base na imagem que você compartilhou.

Aqui está o resultado, conforme a imagem:Clique aqui - (Você será redirecionado para o site PostImage).

Os códigos que utilizei foram:

-- HTML:

<body>
    <section>
        <h3 class="vagas__abertas">Vagas abertas!</h3>
        <h1 class="vagas__titulos_talentos">Estamos procurando por talentos</h1>
        <p class="vagas__texto">Somos uma equipe 100% remota com pessoas do Brasil inteiro.</p>

        <div class="imagem">
            <img src="/assets/img/Image.png" alt="Pessoas no escritório">
        </div>
    </section>
</body>

-- CSS:

section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza horizontalmente */
    justify-content: center; /* Centraliza verticalmente */
    text-align: center;
    gap: 10px; /* Reduz o espaçamento entre os elementos */
    height: 50vh; /* Define a altura da seção */
    padding: 0 20px; /* Adiciona um pequeno padding lateral */
}

.vagas__abertas {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #8E2424;
}

.vagas__titulos_talentos {
    font-family: "Inter", sans-serif;
    font-weight: 600; 
    font-size: 19px;
    color: var(--cor-preto);
}

.vagas__texto {
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: var(--cor-cinza);
}

.imagem {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px; 
}

.imagem img {
    max-width: 100%;
    height: auto;
}

Espero ter ajudado! Qualquer dúvida, não hesite em me chamar por aqui. Abraço! :D