QR-Code Challenge using CSS Flexbox and Semantic HTML5

What I am most proud of is my grasping the foundations of having a scalable website that responds well on both desktop and mobile. It is an issue I have had with my personal portfolio page and I managed to use availbe resources to understand it for this project and will apply them on a greater scale for my portfolio. Here is an example code that I'm proud of:

css
.qr-code img {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: 10px;
}

What I would do differently next time which was suggested at the beginning of the project is focus on structuring the html entirely before moving to the styling. While it didn't impact me that much with a bigger project I can see where things would get complicated.

My biggest challenge was understanding how to build components with reusable CSS. I overcame them by using the offline CSS resources I found to try and reuse as much script as possible without creating new css code to style the project.

My specific area that I would like help in is reusing CSS code. I'm struggling to determine when to use Flexbox or Flex grid for example, and then understanding how to factor that into the entire design of a project.

With this project, I'm not sure if it's possible but I would love to know if theres a way to cut down the amount of CSS that I used and make it more efficient and easier to read to a third party reviewing my code.