[Sugestão] Lista de exercícios | HTML e CSS: Classes, posicionamento e Flexbox

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="apresentacao">
            <section class="apresentacao__conteudo">
                <div><h1><span class="apresentacao__conteudo__titulo">Lenda de Ayra, a Bruxa das Sombras</span></h1></div>
                <p class="apresentacao__conteudo__texto">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.</p>
            </section>
            <div><img src="bruxa.jpg" alt="bruxa"></div>
        </div>
    </main>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body{
    background-color: brown;
    font-family: 'Times New Roman', Times, serif;
    height: 100vh;
    box-sizing: border-box;
}
.apresentacao{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10%;
}
.apresentacao__conteudo{
    width: 615px;
    font-family: "Krona One", sans-serif;
}
.apresentacao__conteudo__titulo{
    font-size: 30px;
    color: palevioletred;
}
.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
    color: whitesmoke;
}

site