[Component] - QR code Card with HTML & CSS

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

Personally, I was able to improve the similarity and consistency of the output of the design compared to my previous experience. For next time, in the CSS section, I would like to implement CSS selectors and maximize the use of grids and units.

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

Some of the obstacles encountered include adjusting the width of text and images to have a fixed width according to the given design. How to overcome this by limiting the maximum width character length with max-width then using ch; height, width, and object-fit to adjust the size of the image.

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

I would like to know what your opinion is about my code in setting the width of the text and picture. Is this code the right step, and if not, what is the best practice in adjusting the appearance of wrapped text and setting the width in both text and pictures?

main{
  text-wrap: wrap;
  text-wrap-style: pretty;
}
.qr-card {
  display: flex;
  flex-direction: column;
  place-items: center;
  gap: 1rem;
  max-width: 14rem;
  padding: 10px 10px 20px 10px;
  border-radius: 18px;
  background-color: var(--white);

  img {
    width: 100%;
    height:100%;
    object-fit:cover;
    border-radius: 14px;
  }
  h1 {
    max-width: 17ch;
    font-size: 1rem;
    font-weight: 700;
    color: var(--slate-900);
  }
  p {
    max-width: 25ch;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--slate-500);
  }
}

Thank you!