Footer do "apeperia" ficou com os ícones das big techs fora de posição

Outra vez tive problema com os ícones desta página:

A seção "Footer" é está:

<footer class="rodape container">
    <img src="img/logo-apeperia.svg" alt="Logo da Apeperia" class="rodape__logo">
    <ul class="rodape__social">
      <li>
        <a href="#" class="rodape__midia"></a><img src="img/facebook.png" alt="Ícone do Facebook"></a>
      </li>
      <li>
        <a href="#" class="rodape__midia"><img src="img/twitter.png" alt="Ícone do Twitter"></a>
      </li>
      <li>
        <a href="#" class="rodape__midia"></a><img src="img/instagram.png" alt="Ícone do Instagram"></a>
      </li>
    </ul>
    <nav>
      <ul class="rodape__navegacao">
        <li class="rodape__link">Sobre<a href="#"></a></li>
        <li class="rodape__link">Planos<a href="#"></a></li>
        <li class="rodape__link">Blog<a href="#"></a></li>
        <li class="rodape__link">Destaques<a href="#"></a></li>
        <li class="rodape__link">Institucional<a href="#"></a></li>
        <li class="rodape__link">Contato<a href="#"></a></li>
      </ul>
    </nav>
  </footer>

Já o arquivo "rodape.css" já estava pronto.

.rodape {
  display: flex;
  flex-direction: column;
  align-items: center;

  background-color: var(--bg-rodape);

  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

.rodape__social {
  display: flex;
}

.rodape__midia {
  display: block;

  width: 42px;
  height: 42px;

  margin: 2rem 1rem;
}

.rodape__navegacao {
  color: var(--branco);
  text-align: center;
  line-height: 3;
}

.rodape__link {
  display: inline-block;

  margin: 0 0.5rem 0.7rem;
}

Não sei como alinhar este ícones... ... e detalhe: as opções "Sobre", "Planos", etc... também não estão 100% corretas.

Obrigado,

Fabio I.