[Duda] Visualización | Arquitectura CSS: descomplicando los problemas | Alura Latam

Hol, ocurre que la sección se está viendo así: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Pido por favor ayuda para corregir. Aquí dejo mi código HTML y los CSS:

.persona{
    display: flex;
    flex-direction: column;
}

.persona__imagen{
    height: 300px;
    width: 300px;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
}

.persona__imagen--roberta{
background-image: url(/assets/img/personas/roberta.jpg);
}

.persona__imagen--marcela{
    background-image: url(/assets/img/personas/marcela.jpg);
}

.persona__imagen--andreia{
    background-image: url(/assets/img/personas/andrea.jpg);
}

.persona__nombre{
    color: tomato;
    font-family: Pacifico, cursive;
    font-size: 2rem;
    margin: 1rem 0;
}

.persona__funcion{
    color: #595959;
    font-size: 1.25rem;
    text-transform: lowercase;
}

.personas{
    display: flex;
    justify-content: space-between;
    padding-top: 3rem ;
}

Y mi HTML (borré la sección de 'receta' para no pasarme del límite de palabras) es:

<!DOCTYPE html>
<html lang="es">
<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">
    <title>Fruta & Fruto</title>
    <link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto:100,300,400,500,700,900" rel="stylesheet" />
    <link href="./assets/css/normalize.css" rel="stylesheet" />
    <link href="./assets/css/reset.css" rel="stylesheet" />
    <link rel="stylesheet" href="./assets/css/cabecera.css">
    <link rel="stylesheet" href="./assets/css/menu/menu-lista.css">
    <link rel="stylesheet" href="./assets/css/menu/menu-item.css">
    <link rel="stylesheet" href="./assets/css/menu/menu-link.css">
    <link rel="stylesheet" href="./assets/css/banner/banner.css">
    <link rel="stylesheet" href="./assets/css/banner/baner-imagen.css">
    <link rel="stylesheet" href="./assets/css/banner/banner-titulo.css">
    <link rel="stylesheet" href="./assets/css/sobre/sobre.css">
    <link rel="stylesheet" href="./assets/css/sobre/sobre-titulo.css">
    <link rel="stylesheet" href="./assets/css/sobre/sobre-descripcion.css">
    <link rel="stylesheet" href="./assets/css/recetas.css">
    <link rel="stylesheet" href="./assets/css/receta/receta.css">
    <link rel="stylesheet" href="./assets/css/receta/receta-titulo.css">
    <link rel="stylesheet" href="./assets/css/receta/receta-boton.css">
    <link rel="stylesheet" href="./assets/css/receta/receta-contenido.css">
    <link rel="stylesheet" href="./assets/css/receta/receta-imagen.css">
    <link rel="stylesheet" href="./assets/css/receta/receta-descripcion.css">
    <link rel="stylesheet" href="/assets/css/quienes/quienes-descripcion.css">
    <link rel="stylesheet" href="/assets/css/quienes/quienes-titulo.css">
    <link rel="stylesheet" href="/assets/css/quienes/quienes.css">
    <link rel="stylesheet" href="/assets/css/persona/persona-funcion.css">
    <link rel="stylesheet" href="/assets/css/persona/persona-imagen.css">
    <link rel="stylesheet" href="/assets/css/persona/persona-nombre.css">
    <link rel="stylesheet" href="/assets/css/persona/persona.css">
    <link rel="stylesheet" href="/assets/css/persona/persona.css">
</head>
<body>
    <header class="cabecera">
        <img class="logo" src="./assets/img/logo.jpg" alt="frutayfruto">
        <nav class="menu">
            <ul class="menu__lista">
                <li class="menu__item"><a class="menu__link--activo" href="">Inicio</a></li>
                <li class="menu__item"><a class="menu__link" href="">Recetas</a></li>
                <li class="menu__item"><a class="menu__link" href="">Quienes Somos</a></li>
                <li class="menu__item"><a class="menu__link" href="">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <section class="banner">
        <div class="banner__imagen"></div>
        <h2 class="banner__titulo">Reaproveche mejor los alimentos</h2>
    </section>
    <section class="sobre">
        <h2 class="sobre__titulo">Recetas para economizar y ganar salud</h2>
        <p class="sobre__descripcion">Nuestras recetas te ayudan a aprovechar mejor los alimentos, economizar, ganar
            tiempo y practicidad</p>
    </section>
   
    <!-- Aula 4 -->
    <section class="quienes">
        <h3 class="quienes__titulo">Quienes somos</h3>
        <p class="quienes__descripcion">Conozca a la comunidad detrás de la iniciativa</p>
        <div class="personas">
            <div class="persona">
                <div class="persona__imagen persona__imagen--roberta"></div>
                <span class="persona__nombre">Roberta</span>
                <span class="persona__funcion">Contenido</span>
            </div>
            <div class="persona">
                <div class="persona__imagen persona__imagen--marcela"></div>
                <span class="persona__nombre">Marcela</span>
                <span class="persona__funcion">Chef de cocina</span>
            </div>
            <div class="persona">
                <div class="persona__imagen persona__imagen--andreia"></div>
                <span class="persona__nombre">Andréia</span>
                <span class="persona__funcion">Pequeña Productora</span>
            </div>
        </div>
    </section>
</body>
</html>