Haga lo que hicimos.

Ya que corregimos la página portafolio junto con la instructora Bárbara para que se vea bien en diferentes dispositivos, intenté lo mismo con mi página de favoritos. Lo logré bastante pero no quedó 100% ya que tiene un header más extenso y elementos distribuidos en forma de cuadrícula, pero voy a seguir ajustándolo:

https://lady-marianne.github.io/mi-rincon-multimedia-favoritos/

Pongo el trozo de código donde hice los enlaces en forma de cuadrícula:

                <div class="presentacion__enlaces">
                    <a class="presentacion__enlaces__link" href="musica.html"><img src="./assets/musica.jpeg">Música</a>
                    <a class="presentacion__enlaces__link" href="cine.html"><img src="./assets/cine.jpg">Cine</a>
                    <a class="presentacion__enlaces__link" href="series.html"><img src="./assets/series-capa.jpg">Series</a>
                    <a class="presentacion__enlaces__link" href="videos.html"><img src="./assets/youtube.jpeg">YouTube</a>
                </div>

En el CSS, uso una propiedad llamada "GRID" en lugar de Flex para acomodar los enlaces en forma de cuadrícula, con ayuda de ChatGPT:

.presentacion__enlaces {
    display: grid; /* Usa CSS Grid en lugar de Flexbox */
    grid-template-columns: repeat(2, 1fr);  
    grid-template-rows: repeat(2, auto); /* Filas automáticas */
    gap: 32px;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto; /* Centra el grid en su contenedor principal */
    padding: auto;
  }