QR code component (resubmit)

What are you most proud of, and what would you do differently next time?

Redoing the challenge once again for practice.

See my previous solution by clicking here.

What challenges did you encounter, and how did you overcome them?

My objective with this challenge was getting as close to the design as possible while using semantic elements, ensuring responsive layout and best practices such as BEM naming convention.

<!-- Semantic element -->
<main>
  <div class="container">
    <!-- BEM naming convention -->
    <div class="container__img"></div>
    <div class="container__text"></div>
  </div>
</main>

:root {
  --white: hsl(0, 0%, 100%); /* CSS custom property */
  /* ... */
}

.container {
  max-width: 18rem; /* Responsive layout */
  /* ... */
  margin: 1rem; /* Relative units */
}

Some resources I've used during this challenge:

• HTML Semantic Elements
• BEM naming convention
• CSS @import Rule
• CSS Variables - The var() Function
• CSS Units

What specific areas of your project would you like help with?

Looking for feedback about what I might have missed or could've done better.