[Dúvida] Display-flex não funciona | HTML e CSS

Fiz como na aula mas o display flex não funciona para separar a section (parte de texto) da imagem e nem um botão do outro, estou usando a propriedade justify-content mas testei outras e também não funcionam.

Arquivo Index.hml:

 <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pet Shop Spa</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Pet Shop Spa <strong class="titulo-destaque">um lugar de conforto para seu pet.</strong></h1>
            <p class="apresentacao__conteudo__parag">O nosso Pet Shop oferece uma experiência completa para os animais de estimação. Localizado no coração da cidade, proporciona uma ampla variedade de produtos de alta qualidade, desde alimentos premium até acessórios inovadores. Além de venda de produtos, o estabelecimento oferece serviços especializados como banho e tosa, atendimento veterinário e daycare para cães. Com uma equipe apaixonada por animais e um ambiente acolhedor, o Pet Shop Spa se destaca pelo atendimento personalizado, garantindo que cada pet seja tratado com o carinho e a atenção que merece. Venha nos visitar e descubra um novo conceito em cuidados para o seu melhor amigo!</p> <!--Alt + z para deixar tudo no mesmo limite de tela sem precisar ter que rolar p lado-->
            <div class="apresentacao__conteudo__links"> <!--Agrupar elementos-->
                <a class="apresentacao__conteudo__links__link" href="https://petz.com.br">Produtos</a> <!--página da petz usada como exemplo-->
                <a class="apresentacao__conteudo__links__link" href="https://landingpage.petz.com.br/banho-e-tosa">Serviços</a>
            </div>
        </section>
        <img src="Images/img1.jpg" alt="Foto ilustrativa do nosso pet shop">
    </main>
    <footer></footer>

</body>
</html>

Arquivo CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&display=swap');

* { /*tirando a configuração padrão que vem em todas as páginas web para termos mais controle da nossa página*/
    margin: 0;
    padding: 0;
}

body {
    height: 100vh; /*definindo que quero que este item (body) ocupe 100% da página*/
    box-sizing: border-box;
    background-color: #FFFFCC;
    color: black; /*muda a cor do texto*/
}

.apresentacao {
    margin: 10%;
    display: flex; /*por padrão o flexbox coloca os elementos no sentido de linha (na horizontal ou vertical), essa configuração colocamos no lemento pai dos elementos que queremos posicionar*/
    align-items: center; /*vai alinhar todos os itens baseado no item de maior altura*/
    justify-content: space-between;
}

.apresentacao__conteudo {
    width: 615px;
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

.apresentacao__conteudo__parag {
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
}

.apresentacao__conteudo__links {
    display: flex;
    justify-content: space-between;
}

.apresentacao__conteudo__links__link {
    background-color: #A46E3D; /*background-color serve para tag ancora também*/
    color: white;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    padding: 21.5px 0; /*primeiro número é sobre o eixo vertical e o segundo horizontal*/
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

.titulo-destaque {
    color: #A46E3D;
}