NFT preview card component

Buenas Eduardo, excelente trabajo finalizando el challenge, enorabuena por la solución!

Me gustaría intentar contestar tus preguntas y ayudarte con tu solución.

1. Puedes conseguir el efecto de dos formas, usando el div overlay como has hecho tu (la mejor y más sencilla manera a mi parecer), o usando un pseudoelemento ::before para generar el cuadro cuando hagas hover, a mi parecer la primera opción es mucho mas sencilla y logra el objetivo.

2. Este proyecto no necesita Grid, no es un layout complejo, se puede hacer completamente con Flexbox. Utiliza CSS Grid para layouts más complejas con varias filas y columnas, flexbox para layouts más sencillos y como herramienta rápida para alinear

3. Contestado en la pregunta anterior, utiliza Flex para layouts de 1 columna o 1 row (una navegación, un bloque con varios textos, una imagen con texto abajo o al lado..) y grid para estructuras más complejas (los productos de un e-commerce, una galería de imagenes, varios testimoniales en columnas y filas...)

Finalmente me gustaría añadirte algunas cosas para mejorar tu projecto:

• No limites el width a 25% en tu clase child hace que el layout se rompa a partir de 1440px, en vez de eso, añade flex a tu body para poder centrar tu componente de está manera:

body {
  background-color: hsl(217, 54%, 11%);
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

Y con eso lo tendrías centrado en medio de tu body, ya que le estarías dando un tamaño de toda la pantalla con el min-height: 100vh!

Espero que mi feedback te sea de ayuda, si tienes cualquier pregunta no dudes en preguntar, un saludo!