[Projeto] Flexbox: responsividade e alinhamento

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPG-DND</title>
    <link rel = "stylesheet" href="atividade.css">
</head>
<body>
    <header></header>
    <main>
        <div class="responsivo-container">
            <div><h1><span>Lenda de Ayra, a Bruxa das Sombras</span></h1></div>
            <div><p><span>Eldoria, Ayra, a jovem bruxa das sombras, vivia em uma torre na Floresta Sombria. Um dia, um grupo de aventureiros pediu sua ajuda para libertar um dragão que aterrorizava uma aldeia, acreditando que ele estava sob um feitiço maligno.</span></p></div>
            <div><img src="bruxa.jpg" alt="bruxa"></div>
        </div>
    </main>
</body>
</html>

CSS


body{
    background-color: burlywood;
    font-family: 'Times New Roman', Times, serif;
    height: 100vh;
    box-sizing: border-box;
}
main{
    height: 100%;
}
h1, p{
    font-size: 1.5rem;
}
.responsivo-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}