Responsive Product Preview Card Using Flexbox

Great job finishing this challenge. For the most part, it looks pretty good. However, I noticed that the desktop version has an issue with the discounted price and original price being on two separate lines. I also noticed that you have two h1 in a single component, which is not a good practice: every page should have one and only h1. This is because h1, h2, etc are structural tags (and have a semantic meaning), and they should not be used for styling (which is what CSS is for.) A quick fix would be to change <h1>$149</h1> to a <p> tag with a class, such as "discount".

<p class="discount">$149.99</p>

      .text .price .discount,
      .text .price p {
        flex: 1 1 50%;
      }

      .text .price .discount {
        color: var(--Darkcyan);
        font-family: "Fraunces";
        font-size: 1.75em;
        font-weight: bold;
        text-decoration: none;
      }

Hope this helps! And keep on coding.