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

<!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">
    <title>Portugual</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="container">
        <div class="container">
            <div><h1>Pontos turísticos de Portugal</h1></div>
            <div><h2>Gruta de Benagil vista de cima, no Algarve, Portugal</h2></div>
            <div>Há muitas grutas e formações rochosas marinhas na sedutora costa do <strong class="texto-destaque">Algarve</strong> , no sul de <strong class="texto-destaque">Portugal</strong> , e hoje destacamos a gruta de Benagil, <strong class="texto-destaque">mais espetaculares</strong> e famosos da região. A gruta, que fica a leste da pequena vila de pescadores de Benagil, se formou há cerca de 20 milhões de anos pela ação das ondas do Atlântico. A chuva promoveu o desgaste dos estratos mais macios de calcário, criando um orifício gigante no teto da gruta, que é por onde vemos sua parte inferior em nossa imagem. Essa abertura em forma de olho permite que a luz solar penetre no interior da gruta, iluminando a praia dourada e as águas azuis entre suas paredes dispostas em camadas.<p</div>
        </div>
        <div class="responsivo-container">
            <div><h1>Pontos turísticos de Portugal</h1></div>
            <div><h2>Gruta de Benagil vista de cima, no Algarve, Portugal</h2></div>
            <div><p>Há muitas grutas e formações rochosas marinhas na sedutora costa do <strong class="texto-destaque">Algarve</strong> , no sul de <strong class="texto-destaque">Portugal</strong> , e hoje destacamos a gruta de Benagil, <strong class="texto-destaque">mais espetaculares</strong> e famosos da região. A gruta, que fica a leste da pequena vila de pescadores de Benagil, se formou há cerca de 20 milhões de anos pela ação das ondas do Atlântico. A chuva promoveu o desgaste dos estratos mais macios de calcário, criando um orifício gigante no teto da gruta, que é por onde vemos sua parte inferior em nossa imagem. Essa abertura em forma de olho permite que a luz solar penetre no interior da gruta, iluminando a praia dourada e as águas azuis entre suas paredes dispostas em camadas.</p></div>
        </div>
        <h1>
            Pontos turísticos de Portugal</h1>
            <img src="imagem.jpg" alt="Gruta de Benagil vista de cima"
            <h2>
                <strong class="titulo-blog">Gruta de Benagil vista de cima, no Algarve, Portugal</strong>
            </h2>
            <p> Há muitas grutas e formações rochosas marinhas na sedutora costa do <strong class="texto-destaque">Algarve</strong> , no sul de <strong class="texto-destaque">Portugal</strong> , e hoje destacamos a gruta de Benagil, <strong class="texto-destaque">mais espetaculares</strong> e famosos da região. A gruta, que fica a leste da pequena vila de pescadores de Benagil, se formou há cerca de 20 milhões de anos pela ação das ondas do Atlântico. A chuva promoveu o desgaste dos estratos mais macios de calcário, criando um orifício gigante no teto da gruta, que é por onde vemos sua parte inferior em nossa imagem. Essa abertura em forma de olho permite que a luz solar penetre no interior da gruta, iluminando a praia dourada e as águas azuis entre suas paredes dispostas em camadas.</p>
            <p>
                <strong class="urgente">A gruta oferece uma paisagem impactante que quando vemos na Internet, que pensamos – tenho que conhecer este lugar! Uma praia que fica dentro de uma gruta com duas entradas nas falésias e um buraco no teto que a torna iluminada, chamado de Algar de Benagil.</strong>
                </p>
    </main>
    <footer></footer>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

urgente {
    margin: 10px;
    border: 2px solid black;
    padding: 5px;
}

body{
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #0a0a0a;
    color: #f4edede1;
}

.titulo-blog {
    color: #1cc5a6;
}

.texto-destaque {
    color: #b223c5;
}

.urgente {
    color: red;
}

.container {
    display: flex;
    align-items: center;
    height: 300px;
    display: flex;
    justify-content: space-between;
  }

  .responsivo-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

Insira aqui a descrição dessa imagem para ajudar na acessibilidade