Minha solução

Fiz de uma forma diferente do professor

Galeria:

import React from 'react'
import Tags from '../Tags'
import styles from './Galeria.module.scss'
import fotos from './fotos.json'
import Card from '../Card'

function Galeria() {
  return (
    <section className={styles.galeria}>
        <h2>Navegue pela galeria</h2>
        <Tags/>
        <ul className={styles.galeria__cards}>
            {fotos.map(foto => {
                return(
                    <Card 
                        id={foto.id}
                        imagem={foto.imagem}
                        titulo={foto.titulo} 
                        creditos={foto.creditos}
                        styles={styles}
                    />    
                )
            })}
        </ul>
    </section>
  )
}

export default Galeria

Card:

import React from 'react'
import like from './favorito.png'
import open from './open.png'

function Card({id, imagem, titulo, creditos, styles}) {
    return (
        <li key={id} className={styles.galeria__card}>
            <img className={styles.galeria__imagem} src={imagem} alt={titulo} />
            <p className={styles.galeria__descricao}>{titulo}</p>
            <div>
                <p>{creditos}</p>
                <span>
                    <img src={like} alt="Ícone de like" />
                    <img src={open} alt="Ícone de abrir" />
                </span>
            </div>
        </li>
    )
}

export default Card