Posicionar div embaixo de outra | CSS: dispondo elementos com Flexbox e Grid

Fiz o curso para me auxiliar na construção desses cards. Mas não estou conseguindo posicionar....

Esse é o resultado que eu quero chegar: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Como está agora: Insira aqui a descrição dessa imagem para ajudar na acessibilidade Quando vou adicionar a div embaixo, ela vai para o lado da div de "panoramas de compras"

Código:

<body>

    <main class="main">

    <div class="titulo-principal">
        <a>Panorama de Vendas</a>
    </div>

    <div class="titulo-principal-meio">
        <a>Resumo de Indicadores</a>
    </div>

    <div class="titulo-principal">
        <a>Panorama de Compras</a>
    </div>



</main>

</body>

:root {
    --cor-fundo-1: linear-gradient(68.15deg, #05193d 16.62%, #205a91 85.61%);
    --cor-fundo-2: linear-gradient(90deg, rgba(20,107,121,1) 30%, rgba(20,41,46,1) 83%, rgba(20,26,29,1) 100%);
    /*background-color: var(--cor-fundo-azul); */

}

body {
    background: var(--cor-fundo-2);
}

.main {
    display: flex;
    flex-direction: row;
}

.titulo-principal {
    text-align: center;
    padding: 15px;
    width: 350px;
    margin-left: 30px;
    margin-top: 20px;
    border-radius: 33px;
    background: #f8f7f7;
    box-shadow:  20px 20px 60px #0e01019c,
             -20px -20px 60px #0a01011a;
}

.titulo-principal-meio {
    text-align: center;
    padding: 15px;
    width: 600px;
    margin-left: 30px;
    margin-top: 20px;
    border-radius: 33px;
    background: #f8f7f7;
    box-shadow:  20px 20px 60px #0e01019c,
             -20px -20px 60px #0a01011a;
}