@font-face/mobile root/CSS reset

Hello again my friend, Incredible work on this! You’re making great strides, and I have a couple of suggestions that might push it even further…

• This should be in lowercase <p>PERFUME</p> and styled in CSS with text-transform: uppercase;, Keeping text lowercase in HTML improves accessibility and SEO. Using text-transform: uppercase; in CSS separates content from style, ensuring screen readers interpret the text correctly.

• Avoid using id selectors for styling in CSS because they are too specific and hard to override, making your styles less flexible and maintainable. Instead, use class selectors (.), which are reusable and more manageable, allowing for better control over your styles and easier updates.

      <img id="fregance_img_desktop" src="images/image-product-desktop.jpg" alt="fregance">
      <img id="fregance_img_mobile" src="images/image-product-mobile.jpg" alt="fregance">

• Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

• Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like 1.5 for flexibility. Avoid using fixed units like px or %, as they don't adapt well to changes in font size or layout.

I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻