[Dúvida] Dificuldade em fazer e posicionar um card | HTML e CSS

Salve, pessoal!

Estou desenvolvendo um portfólio e tive a ideia de inserir um card para exemplicar melhor a atuação desenvolvida pela profissional, porém tenho encontrado dificuldade em fazer e posicionar o card da forma como ilustrei no Figma. Nas minhas tentativas toda vez que criava um card ele automaticamente jogava o conteúdo já presente para a esquerda e quando eu tentava reposicionar o card ele nunca ficava centralizado abaixo do conteúdo.

Figma: https://www.figma.com/file/xVswrmYXrLYloL5rIMe8Pl/Portf%C3%B3lio---Direito?node-id=0%3A1&t=AshYDUhhKjo8GX03-1

Segue o código:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Portfólio</title>
</head>

<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu_link" href="index.html">Home</a>
            <a class="cabecalho__menu_link" href="#">Sobre mim</a>
            <div class="logo"> <img class="cabecalho__menu_link" src="assets/logo.png" alt="Logo Marina"></div>
            <a class="cabecalho__menu_link" href="#">Qualificação</a>
            <a class="cabecalho__menu_link" href="#">Contatos</a>
        </nav>
        </div>
    </header>

    <main>
        <div class="principal">
            <div class="principal__conteudo">
                <h1 class="principal__conteudo__titulo">Marina Mantovaneli</h1>
                <p class="principal__conteudo__texto">Advogada com atuação em direito da saúde</p>
                <p class="principal__conteudo__lore">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
                    ut ex eget tellus semper porttitor
                    vel nec est. Aenean maximus, turpis sit amet efficitur sollicitudin, dui dui accumsan sapien, vel
                    tempus elit tortor a diam. Cras aliquet odio sed sapien dapibus, non ornare lorem varius. Aliquam
                    erat volutpat.</p>
            </div>
        </div>
    </main>

    <footer>

    </footer>
</body>

</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Montserrat:wght@100;400&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --cor-fundo: #819CB3;
    --cor-fonte: #FFFF;
    --cor-destaque: #DA0037;

    --fonte-principal: 'Montserrat';
    --fonte-secundaria: 'Montserrat Thin'

}

body {
    background: var(--cor-fundo);
    padding: 1em 0;
}

.cabecalho {
    padding: 1% 0% 0% 0%;
}

.cabecalho__menu {
    display: flex;
    justify-content: center;
    gap: 35px;
}

.cabecalho__menu_link {
    font-size: 1.5rem;
    font-weight: 80;
    color: var(--cor-fonte);
    text-decoration: none;
    padding: 2.6% 0% 0% 0%;
    font-family: var(--fonte-principal);
}

.principal {
    color: var(--cor-fonte);
    font-family: var(--fonte-principal);
    display: flex;
    justify-content: center;
    text-align: center;
    padding-right: 2%;
    padding-top: 5%;
}

.principal__conteudo__titulo {
    font-size: 40px;
    font-family: var(--fonte-secundaria);
    font-weight: 40;
}

.principal__conteudo__texto {
    font-size: 18px;
    font-weight: 300;
    padding-top: 1.5%;
}

.principal__conteudo__lore {
    font-family: var(--fonte-principal);
    width: 659px;
    height: 149px;
    padding-top: 15%;
    font-size: 20px;
    font-weight: 35;
    display: flex;
    align-items: center;
    text-align: center;
}

Opa Pedro, como vai?

Com base no código enviado desenvolvi o seguinte código HTML:

<section>
            <div class="cards">
                <div class=cards__item>
                    <p class="cards__texto"></p>
                </div>
                <div class=cards__item>
                    <p class="cards__texto"></p>
                </div>
                <div class=cards__item>
                    <p class="cards__texto"></p>
                </div>
            </div>
</section>

Dividiremos o nosso código em 3 divs principais, uma para cada parte do nosso código:

div cards - referente a parte onde nossos cards ficaram alocados;
div cards_item - referente a parte branca do nosso card;
div cards__texto - parte cinza escuro do card.

No CSS usaremos do display flex para alinhar os nossos elementos e podermos separar os cards:

.cards {
    display:flex;
    margin-top: 3em;
    justify-content: center;
    gap:50px;

}

margin-top - margem de distância do conteúdo de cima da página;
justify-content - para centralizarmos os itens do canto da página;
gap - para separar elementos filhos, nesse caso os 3 cards.

Customizando os cards:

.cards__item{
    height: 400px;
    background-color: #D9D9D9;
    width:250px;
    display: flex;
    justify-content: center;
    border-radius: 10px;
}

height - aumentamos a altura para além do conteúdo;
width - aumentamos o largura para além do conteúdo;
justify-content - para centralizarmos os itens do canto dos cards.

Dentro dos cards:

.cards__texto{
    margin-top: 2em;
    background-color: #333333    ;
    padding: 60px 94px;
    width: 100px;
    height: 50px;
    border-radius:10px;
}

margin-top - afastar o conteúdo principal do canto superior do card;
padding - espaçamento interno que nosso conteúdo vai ocupar;
width e height - limitaremos o tamanho do conteúdo em uma área específica de 100x50.

Espero ter ajudado!

Fico à disposição, tenha um bom dia e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓

Chegou a hora de transformar