Product-preview-card-component

HTML:

• You don't need to include words like "picture" or "image" in the alt text, as screen readers read that by default.

• As the card heading would likely not be the main heading on a page, I would change it to a <h2>.

• To make it clearer for screen readers that the second price is the old price, I would add a <span> with a "visually-hidden" class:<p class="old-price"><span class="visually-hidden">Old price: </span>$169.99</p>. Then, apply the following styles to make "Old price" visible for screen readers only:

.visually-hidden {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

This article explains what each of the properties does.

CSS:

• Including a CSS Reset at the top is good practice.

• To center the card horizontally and vertically, with space between the main and the footer, I would use Flexbox on the body:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;
gap: 2rem;

• When padding-left and padding-right have the same value, you can use the shorthand:padding-inline: 2rem;.

• You must remove the max-height on the card - never limit elements containing text! The current max-height: 70vh cuts off the card just underneath the prices - always let the content, including margin and padding, determine the height.

• Do also remove height: 100vh on the card.

• max-width on the card should be in rem instead of % - around 50rem works fine.

• On smaller screens the "Add to cart" button touches the edge of the card - add some padding or margin to create breathing room.

• font-size on .attribution must also be in rem.

• letter-spacing must not be in px. You can use em, where 1em equals the element's font size.