Product preview card | Responsive with Grid

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

I tried to keep my code clean with a good HTML and CSS structure.

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

I did not use Flexbox for the text box of the card (with its gap property) and I had to use utility classes in order to apply the margins needed. In this way, I managed to avoid repeating the same CSS declarations.

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

• Accessibility: Is the way I deal with the `` tag correct? I use it for the deleted price part:

$169.99
The old price of the perfume in strikethrough

• The CSS Reset (by Andy Bell) that I am using, removes only the margin-block-end part of the margins for elements like: body, h1, h2 etc. This results in elements that keep their user agent stylesheet. For example body keeps a small margin on three sides (top, right, left) of 8px. I had to repeatedly set the margin-bottom or margin-top using some utility class. Is there a better way to deal with this issue?

• I had to set to the element the `display:inline` in order for the `object-fit: cover;` on the element to work. Is this approach correct?

Any help is valuable!