QR Card sin necesidad de usar Flexbox ni Grid. [BEM]

You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

.container {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

Hola 👋, te dejo esto por si quieres echarle un vistazo:

HTML 🧱, ACCESIBILIDAD ⚖:

🔹Esta es una imagen significativa y, por lo tanto, el texto alternativo debería dar una buena descripción en caso de que el usuario no pueda verla por algún motivo. Algo como 'Codigo QR para ir al sitio de Frontend Mentor' quizás.

CSS🎨:

🔹El contenido de la página se puede centrar usando Grid o Flexbox. Por ejemplo de la siguiente manera:

body {
     min-height: 100vh;
     display: grid;
     place-content: center;
}

🔹El card debería tener un max-width que coincida con el diseño provisto para la versión de escritorio. Y la altura quedará definida por el contenido, no debería ser necesario establecerla.

🔹Las unidades de longitud como los píxeles pueden no ser la mejor alternativa porque los tamaños de pantalla y las preferencias del usuario varían, y las unidades absolutas no se escalan. Lo digo principalmente por el font-size porque ya veo que utilizaste rem en otras propiedades 👍.

🔹No necesitas usar font-weight ya que 700 es el valor predeterminado para la fuente negrita.

🔹Media queries: No tienes que repetir todo el código sino sólo que aquello que cambie en la versión desktop respecto a la versión móvil. Y el primer media query parecería innecesario.

Avísame si no está de acuerdo con algo o si deseas obtener más información sobre cualquiera de estos temas.

Y si tienes alguna pregunta, estoy aquí para responder, así que no lo dudes. 🙂

Saludos