add comments for better understanding

parfum-shop/src/App.css

@@ -116,6 +116,8 @@
   backdrop-filter: blur(8px);
 }
 
+/* --------------------------------------------------- */
+
 /* SECTIONS */
 .section {
   padding: 28px 20px 10px;
@@ -135,6 +137,8 @@
   color: #1d1d1d;
 }
 
+/* --------------------------------------------------- */
+
 /* GRID */
 .product-grid {
   display: grid;
@@ -184,7 +188,7 @@
 }
 
 .product-image {
-  width: 100%;
+  width: 100%; /* Angepasst auf Card */
   max-width: 600px;
   height: auto;
   object-fit: contain;
@@ -212,6 +216,8 @@
   line-height: 1;
 }
 
+/* --------------------------------------------------- */
+
 /* DISCOVERY */
 .discovery-section {
   display: grid;
@@ -267,6 +273,8 @@
   cursor: pointer;
 }
 
+/* --------------------------------------------------- */
+
 /* RESPONSIVE */
 @media (max-width: 900px) {
   .hero {
@@ -326,4 +334,8 @@
   .product-card {
     min-height: 320px;
   }
-}
+
+  
+}
+
+/* --------------------------------------------------- */

parfum-shop/src/App.jsx

@@ -1,5 +1,6 @@
 import "./App.css";
 
+//Images for the grid
 const perfumes = [
   {
     id: "01",
@@ -48,7 +49,9 @@ const perfumes = [
 function App() {
   return (
     <div className="page">
+      {/* Hero */}
       <header className="hero">
+        {/* Navbar */}
         <nav className="navbar">
           <div className="nav-pill">
             <a href="#home" className="nav-link active">
@@ -89,6 +92,7 @@ function App() {
       </header>
 
       <main>
+        {/* Grid with Core Collection */}
         <section className="section" id="dufte">
           <div className="section-heading">
             <h2>
@@ -120,6 +124,7 @@ function App() {
         </section>
 
         <section className="discovery-section" id="testen">
+          {/* Dicovery Set Section */}
           <div className="discovery-copy">
             <h2>
               DER SICHERE EINSTIEG