Flexbox and BEM

Ahora para el tema de accesibilidad o errores de HTML, te recomiendo siempre ver los reportes, ver cuales son los problemas, corregirlos y generar un nuevo reporte con 0 errores en TODOS LOS PROYECTOS, porque esto mejorará la calidad de código evitando errores de sintaxis y problemas a futuro ya sea por temas de SEO, código deprecado, etc.

Por lo menos en este proyecto no te recomiendo usar ni section ni articles, el motivo masomenos es que estas etiquetas sirven para englobar una misma temática en tu web. Por ejemplo un section puede ser una sección con un subtitulo, info de esa sección y un conjunto de cards.

Esto lo mencionó porque aqui esta creando una pequeña tarjeta QR que servirá para ponerle diferentes parte como imagenes, textos, números, iconos, etc. Y se suele manejar más con div ya que sirven principalmente para agregarle efectos, posicionamiento, etc.

Por otro lado para eliminar los errores de una vez, lo primero es que utilices un h1 mínimamente por página en tu proyecto en este caso deberías cambiar el h3 por un h1 .

Tambien usar un <main> para colocar todo el contenido principal de tu página en este caso puedes utilizarla para englobar todo el contenido dentro de tu body ya que ahí esta el contenido principal de tu página.

Con esto masomenos puedes terminar sin errores en el reporte y te va servir para poder quitarle los errores en tus demás proyectos :D!

Jose Daniel acabo de revisar varios de tus proyectos y te ayudaré a masomenos como eliminar la mayoría de errores de accesbilidad pero primero mejores este diseño (Por cierto comento este proyecto porque es el más sencillo).

Quitale el flex-basis: 300px a la tarjeta para que ocupe todo el tamaño de su contenido más la imagen.

Por otro lado cambia esto a:

.card, .card__img img {
  border-radius: 12px;
}

Es solo que la imagen de adentro tiene menos border-radius que la card.

Tambien modifica este tamaño si puedes para que quede el texto como el diseño.

.card__info {
  width: 230px;
}

Para la sombra te recomiendo utilizar la funcion rgba, o hsla, la relevancia de estas es el ultimo valor que te puede ayudar a dar transparencia haciendo que mientras más cerca esta del 0 es más transparente.

Por ejemplo:

box-shadow: 0 0 16px -2px rgba(0, 0, 0, 0.2);

Con todo esto creo que podrías mejorar mucho el diseño ya que todos los cambios que te mencione los estoy aplicando en el navegador.