meu projeto hover | HTML e CSS: cabeçalho, footer e variáveis CSS

HTML:

<!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>Portifolio</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <header></header>
    <main class="apresentacao">
      <section class="apresentacao__conteudo">
        <h1 class="apresentacao__conteudo__titulo">
          Eleve seu negócio digital a outro nível<strong
            class="titulo-destaque"
          >
            com um Front-end de qualidade!
          </strong>
        </h1>
        <p class="apresentacao__conteudo__texto">
          Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em
          React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em
          prática boas ideias. Vamos conversar?
        </p>
        <div class="apresentacao__links">

          <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
          <a class="apresentacao__links__link"
            href="https://github.com/rafaballerini">
            <img src="./assets/Logo Github.png" />
            GitHuB
          </a>

          <a class="apresentacao__links__link" href="https://linkedin.com/in/rafaellaballerini">
            <img src="./assets/Logo linkedin.png">
            Linkedin
          </a>

          <a class="apresentacao__links__link" href="https://twitch.tv/guilimadev">
            <img src="./assets/Logo Twitch.png">
            Linkedin
          </a>

        </div>
      </section>
      <img class = "apresentacao__imagem" src="./assets/Imagem.png" alt="Foto da Joana Santos programando" />
    </main>
    <footer></footer>
  </body>
</html>

CSS:

import url("https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap");

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  box-sizing: border-box;
  background-color: #000000;
  color: #f6f6f6;
}

.titulo-destaque {
  color: #22d4fd;
}

.apresentacao {
  margin: 10% 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.apresentacao__conteudo {
  width: 615px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

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

.apresentacao__conteudo__texto {
  font-size: 24px;
  font-family: "Montserrat", sans-serif;
}

.apresentacao__links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; /* Centralizando os botões na vertical */
  gap: 32px; /*dando espaço entre os elementos */
}

.apresentacao__links__subtitulo {
  font-size: 24px;
  font-family: "Krona One", sans-serif;
  font-weight: 400;
}

.apresentacao__links__link {
  display:flex;
  justify-content: center;
   gap : 16px; /*Separa os icones da escrita */
  border: 2px solid #22d4fd;
  width: 378px;
  text-align: center;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 600;
  padding: 21.5px 0;
  text-decoration: none;
  color: #f6f6f6;
  font-family: "Montserrat", sans-serif;
}

.apresentacao__links__link:hover{ /*muda a cor de fundo qdo passamos o mouse*/
  background-color: #272727;
}

.apresentacao__imagem:hover{ /*Deixando a imagem opaca qdo passo o mouse */
  opacity : 0.5; 
}

Chegou a hora de transformar