refactor: enhance product detail page layout and specifications display

- Updated product-detail.html to improve spacing and layout for product description and specifications.
- Removed static size and color options sections to streamline the design.
- Added dynamic rendering of product specifications in JavaScript for better user experience.
- Adjusted CSS for improved margin and height settings across various elements.

product-detail.html

@@ -217,38 +217,14 @@
 
               <!-- Product Description -->
               <p
-                class="font-playfair font-normal text-sm text-black mb-12 max-w-md"
+                class="font-playfair font-normal text-sm text-black mb-8 max-w-md"
                 id="product-description"
               >
                 <!-- Product description will be populated dynamically -->
               </p>
 
-              <!-- Size Options -->
-              <div class="mb-8">
-                <h3
-                  class="font-playfair font-normal text-sm text-quick-silver mb-4"
-                >
-                  Size
-                </h3>
-                <div class="grid grid-cols-6 gap-2" id="size-buttons-container">
-                  <!-- Size buttons will be populated dynamically -->
-                </div>
-              </div>
-
-              <!-- Color Options -->
-              <div class="mb-8">
-                <h3
-                  class="font-playfair font-normal text-sm text-quick-silver mb-4"
-                >
-                  Color
-                </h3>
-                <div class="flex gap-4" id="color-buttons-container">
-                  <!-- Color buttons will be populated dynamically -->
-                </div>
-              </div>
-
               <!-- Quantity and Action Buttons -->
-              <div class="flex flex-col md:flex-row gap-4 md:gap-6 mb-8">
+              <div class="flex flex-col md:flex-row gap-4 md:gap-6 mb-3">
                 <!-- Action Buttons -->
                 <a
                   href="contact.html"
@@ -265,7 +241,14 @@
               </div>
 
               <!-- Divider -->
-              <div class="w-full h-px bg-light-silver mb-8"></div>
+              <div class="w-full h-px bg-light-silver mb-3"></div>
+
+              <!-- Product Specifications -->
+              <div class="mb-8">
+                <div class="space-y-2" id="product-specifications">
+                  <!-- Product specifications will be populated dynamically -->
+                </div>
+              </div>
 
               <!-- Product Metadata -->
               <div class="space-y-4">

scripts/main.js

@@ -330,58 +330,58 @@ function addThumbnailClickListeners() {
         mainImg.setAttribute("data-enlarge-src", imageSrc);
         console.log("Main image updated to:", imageSrc);
       }
+      });
     });
-  });
+  }
-}
 
-// Product detail page functionality
+  // Product detail page functionality
 async function initProductDetail() {
-  console.log("Product detail script running...");
+    console.log("Product detail script running...");
   console.log("Current URL:", window.location.href);
 
-  // Check if we're on the product detail page
+    // Check if we're on the product detail page
-  const productTitle = document.querySelector("h1");
+    const productTitle = document.querySelector("h1");
-  if (!productTitle) {
+    if (!productTitle) {
-    console.log("No h1 found, not on product detail page");
+      console.log("No h1 found, not on product detail page");
-    return;
+      return;
-  }
+    }
   console.log("Found h1 element:", productTitle);
 
-  // Get product ID from URL
+    // Get product ID from URL
-  const urlParams = new URLSearchParams(window.location.search);
+    const urlParams = new URLSearchParams(window.location.search);
-  const productId = parseInt(urlParams.get("id"));
+    const productId = parseInt(urlParams.get("id"));
-  console.log("Product ID from URL:", productId);
+    console.log("Product ID from URL:", productId);
 
-  if (!productId) {
+    if (!productId) {
-    console.log("No product ID found in URL");
+      console.log("No product ID found in URL");
-    return;
-  }
-
-  try {
-    // Load product data
-    const response = await fetch("data/products.json");
-    const data = await response.json();
-    const product = data.products.find((p) => p.id === productId);
-
-    if (!product) {
-      console.error("Product not found:", productId);
       return;
     }
 
-    console.log("Loading product:", product);
+    try {
+      // Load product data
+      const response = await fetch("data/products.json");
+      const data = await response.json();
+      const product = data.products.find((p) => p.id === productId);
 
-    // Update page title
+      if (!product) {
-    document.title = `${product.name} - KHY`;
+        console.error("Product not found:", productId);
+        return;
+      }
 
-    // Update the "Product Details" title with the actual product name
+      console.log("Loading product:", product);
-    const productDetailsTitle = document.getElementById(
-      "product-details-title"
-    );
-    if (productDetailsTitle) {
-      productDetailsTitle.textContent = product.name;
-    }
 
-    // Update product title (the main product title, not the breadcrumb)
+      // Update page title
+      document.title = `${product.name} - KHY`;
+
+      // Update the "Product Details" title with the actual product name
+      const productDetailsTitle = document.getElementById(
+        "product-details-title"
+      );
+      if (productDetailsTitle) {
+        productDetailsTitle.textContent = product.name;
+      }
+
+      // Update product title (the main product title, not the breadcrumb)
     const productTitle = document.getElementById("product-title");
     console.log("Product title element:", productTitle);
     if (productTitle) {
@@ -445,97 +445,148 @@ async function initProductDetail() {
       addThumbnailClickListeners();
     }
 
-    // Update size options
+    // Update product specifications
-    const sizeContainer = document.getElementById("size-buttons-container");
+    const specificationsContainer = document.getElementById(
-    console.log("Size container:", sizeContainer);
+      "product-specifications"
-    if (sizeContainer && product.sizes) {
+    );
-      sizeContainer.innerHTML = product.sizes
+    console.log("Specifications container:", specificationsContainer);
-        .map(
+    if (specificationsContainer && product.additionalInformation) {
-          (size, index) => `
+      const specifications = [];
-          <button
+
-            class="w-8 h-8 ${
+      // Add key specifications from additionalInformation
-              index === 0
+      if (product.additionalInformation.Material) {
-                ? "bg-uc-gold text-white"
+        specifications.push({
-                : "bg-floral-white text-black"
+          label: "Material",
-            } font-playfair font-normal text-sm rounded flex items-center justify-center size-button"
+          value: product.additionalInformation.Material,
-          >
+        });
-            ${size}
+      }
-          </button>
+
-        `
+      if (product.additionalInformation.Design) {
-        )
+        specifications.push({
-        .join("");
+          label: "Design",
-      console.log("Updated size options with", product.sizes.length, "sizes");
+          value: product.additionalInformation.Design,
-    }
+        });
+      }
+
+      if (product.additionalInformation["Finish Options"]) {
+        specifications.push({
+          label: "Finish Options",
+          value: product.additionalInformation["Finish Options"],
+        });
+      }
+
+      if (product.additionalInformation.Headrest) {
+        specifications.push({
+          label: "Headrest",
+          value: product.additionalInformation.Headrest,
+        });
+      }
+
+      if (product.additionalInformation["Use Cases"]) {
+        specifications.push({
+          label: "Use Cases",
+          value: product.additionalInformation["Use Cases"],
+        });
+      }
+
+      if (product.additionalInformation.Ergonomics) {
+        specifications.push({
+          label: "Ergonomics",
+          value: product.additionalInformation.Ergonomics,
+        });
+      }
+
+      if (product.additionalInformation.Maintenance) {
+        specifications.push({
+          label: "Maintenance",
+          value: product.additionalInformation.Maintenance,
+        });
+      }
+
+      if (product.additionalInformation.Durability) {
+        specifications.push({
+          label: "Durability",
+          value: product.additionalInformation.Durability,
+        });
+      }
+
+      if (product.additionalInformation.Warranty) {
+        specifications.push({
+          label: "Warranty",
+          value: product.additionalInformation.Warranty,
+        });
+      }
+
+
+          // Render specifications
+          specificationsContainer.innerHTML = specifications
+            .map(
+              (spec) => `
+              <div class="flex justify-between items-start py-1 border-b border-gray-100 last:border-b-0">
+                <span class="font-playfair font-normal text-xs text-quick-silver flex-shrink-0 mr-4">
+                  ${spec.label}:
+                </span>
+                <span class="font-playfair font-normal text-xs text-black text-right">
+                  ${spec.value}
+                </span>
+              </div>
+            `
+            )
+            .join("");
 
-    // Update color options
-    const colorContainer = document.getElementById("color-buttons-container");
-    console.log("Color container:", colorContainer);
-    if (colorContainer && product.colors) {
-      colorContainer.innerHTML = product.colors
-        .map(
-          (color, index) => `
-          <button
-            class="w-8 h-8 rounded-full ${
-              index === 0 ? "border-2 border-black" : ""
-            }"
-            style="background-color: ${color}"
-          ></button>
-        `
-        )
-        .join("");
       console.log(
-        "Updated color options with",
+        "Updated specifications with",
-        product.colors.length,
+        specifications.length,
-        "colors"
+        "items"
       );
-    }
-
-    // Update product metadata - find by text content
-    const allSpans = document.querySelectorAll("span");
-
-    // Find and update Model No.
-    const modelNoLabel = Array.from(allSpans).find(
-      (span) => span.textContent === "Model No."
-    );
-    if (modelNoLabel && product.modelNo) {
-      const modelNoValue =
-        modelNoLabel.parentElement.querySelector("span:last-child");
-      if (modelNoValue) {
-        modelNoValue.textContent = product.modelNo;
       }
-    }
 
-    // Find and update Category
+      // Update product metadata - find by text content
-    const categoryLabel = Array.from(allSpans).find(
+      const allSpans = document.querySelectorAll("span");
-      (span) => span.textContent === "Category"
+
-    );
+      // Find and update Model No.
-    if (categoryLabel && product.category) {
+      const modelNoLabel = Array.from(allSpans).find(
-      const categoryValue =
+        (span) => span.textContent === "Model No."
-        categoryLabel.parentElement.querySelector("span:last-child");
+      );
-      if (categoryValue) {
+      if (modelNoLabel && product.modelNo) {
-        categoryValue.textContent =
+        const modelNoValue =
+          modelNoLabel.parentElement.querySelector("span:last-child");
+        if (modelNoValue) {
+          modelNoValue.textContent = product.modelNo;
+        }
+      }
+
+      // Find and update Category
+      const categoryLabel = Array.from(allSpans).find(
+        (span) => span.textContent === "Category"
+      );
+      if (categoryLabel && product.category) {
+        const categoryValue =
+          categoryLabel.parentElement.querySelector("span:last-child");
+        if (categoryValue) {
+          categoryValue.textContent =
           product.category.charAt(0).toUpperCase() + product.category.slice(1);
+        }
       }
-    }
 
-    // Find and update Dimensions
+      // Find and update Dimensions
-    const dimensionsLabel = Array.from(allSpans).find(
+      const dimensionsLabel = Array.from(allSpans).find(
-      (span) => span.textContent === "Dimension"
+        (span) => span.textContent === "Dimension"
-    );
+      );
-    console.log("Dimensions label found:", dimensionsLabel);
+      console.log("Dimensions label found:", dimensionsLabel);
-    console.log("Product dimensions:", product.dimensions);
+      console.log("Product dimensions:", product.dimensions);
 
-    if (dimensionsLabel && product.dimensions) {
+      if (dimensionsLabel && product.dimensions) {
-      const dimensionsValue =
+        const dimensionsValue =
-        dimensionsLabel.parentElement.querySelector("span:last-child");
+          dimensionsLabel.parentElement.querySelector("span:last-child");
-      console.log("Dimensions value element:", dimensionsValue);
+        console.log("Dimensions value element:", dimensionsValue);
-      if (dimensionsValue) {
+        if (dimensionsValue) {
-        dimensionsValue.textContent = product.dimensions;
+          dimensionsValue.textContent = product.dimensions;
-        console.log("Updated dimensions to:", product.dimensions);
+          console.log("Updated dimensions to:", product.dimensions);
+        }
       }
-    }
 
-    // Update description content
+      // Update description content
     const descriptionContainer = document.getElementById(
       "product-description-content"
     );
@@ -691,40 +742,40 @@ async function initProductDetail() {
             ? window.currentGalleryImages.length - 1
             : window.currentGalleryIndex - 1;
         renderGalleryCarousel();
-      });
+        });
-    }
+      }
 
-    // Update related products section
+      // Update related products section
-    const relatedGrid = document.getElementById("related-grid");
+      const relatedGrid = document.getElementById("related-grid");
-    if (relatedGrid && product.category) {
+      if (relatedGrid && product.category) {
-      console.log("Current product category:", product.category);
+        console.log("Current product category:", product.category);
-      console.log(
+        console.log(
-        "All products:",
+          "All products:",
-        data.products.map((p) => ({
+          data.products.map((p) => ({
-          id: p.id,
+            id: p.id,
-          name: p.name,
+            name: p.name,
-          category: p.category,
+            category: p.category,
-        }))
+          }))
-      );
+        );
 
-      // Filter related products by category (excluding current product)
+        // Filter related products by category (excluding current product)
-      const allRelatedProducts = data.products.filter(
+        const allRelatedProducts = data.products.filter(
-        (p) => p.category === product.category && p.id !== product.id
+          (p) => p.category === product.category && p.id !== product.id
-      );
+        );
 
-      console.log("All related products found:", allRelatedProducts);
+        console.log("All related products found:", allRelatedProducts);
 
-      let currentPage = 1;
+        let currentPage = 1;
-      const pageSize = 4;
+        const pageSize = 4;
 
-      function renderRelatedProducts() {
+        function renderRelatedProducts() {
-        const start = 0;
+          const start = 0;
-        const end = currentPage * pageSize;
+          const end = currentPage * pageSize;
-        const productsToShow = allRelatedProducts.slice(start, end);
+          const productsToShow = allRelatedProducts.slice(start, end);
 
-        relatedGrid.innerHTML = productsToShow
+          relatedGrid.innerHTML = productsToShow
-          .map(
+            .map(
-            (p) => `
+              (p) => `
             <a href="product-detail.html?id=${p.id}" class="block">
               <div class="rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-shadow">
                 <div class="h-72 ${
@@ -733,8 +784,8 @@ async function initProductDetail() {
                     : "bg-white"
                 } flex items-center justify-center">
                   <img src="${p.image}" alt="${
-              p.alt || p.name
+                p.alt || p.name
-            }" class="w-full h-full object-cover" />
+              }" class="w-full h-full object-cover" />
                 </div>
                 <div class="bg-light-bg p-6">
                   <h3 class="font-poppins font-semibold text-2xl text-[#3A3A3A] mb-0">${
@@ -744,37 +795,37 @@ async function initProductDetail() {
               </div>
             </a>
           `
-          )
+            )
-          .join("");
+            .join("");
 
-        // Handle "Show More" button visibility
+          // Handle "Show More" button visibility
+          const showMoreBtn = document.getElementById("related-show-more");
+          if (showMoreBtn) {
+            const hasMore = allRelatedProducts.length > end;
+            showMoreBtn.style.display = hasMore ? "inline-flex" : "none";
+            showMoreBtn.classList.add(
+              "inline-flex",
+              "items-center",
+              "justify-center"
+            );
+          }
+        }
+
+        // Add event listener for "Show More" button
         const showMoreBtn = document.getElementById("related-show-more");
         if (showMoreBtn) {
-          const hasMore = allRelatedProducts.length > end;
+          showMoreBtn.addEventListener("click", () => {
-          showMoreBtn.style.display = hasMore ? "inline-flex" : "none";
+            currentPage += 1;
-          showMoreBtn.classList.add(
+            renderRelatedProducts();
-            "inline-flex",
+          });
-            "items-center",
-            "justify-center"
-          );
         }
-      }
 
-      // Add event listener for "Show More" button
+        // Initial render
-      const showMoreBtn = document.getElementById("related-show-more");
+        renderRelatedProducts();
-      if (showMoreBtn) {
-        showMoreBtn.addEventListener("click", () => {
-          currentPage += 1;
-          renderRelatedProducts();
-        });
       }
-
+    } catch (error) {
-      // Initial render
+      console.error("Error loading product data:", error);
-      renderRelatedProducts();
     }
-  } catch (error) {
-    console.error("Error loading product data:", error);
-  }
 }
 
 // Product Comparison Page Functionality
@@ -1286,7 +1337,7 @@ function initHeroCarousel() {
 
         // Ensure image always fits its container uniformly
         heroImage.style.height = "100%";
-        heroImage.style.objectFit = "cover";
+          heroImage.style.objectFit = "cover";
 
         // Fade in new image
         heroImage.style.opacity = "1";

styles/main.css

@@ -783,6 +783,10 @@ video {
   margin-top: 2.5rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mt-20 {
   margin-top: 5rem;
 }
@@ -791,16 +795,12 @@ video {
   margin-top: 0.75rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
 .mt-6 {
   margin-top: 1.5rem;
 }
 
-.mt-2 {
+.mr-4 {
-  margin-top: 0.5rem;
+  margin-right: 1rem;
 }
 
 .box-border {
@@ -891,22 +891,22 @@ video {
   height: 24rem;
 }
 
-.h-\[145px\] {
+.h-\[22vh\] {
-  height: 145px;
+  height: 22vh;
 }
 
-.h-\[301px\] {
+.h-\[29vh\] {
-  height: 301px;
+  height: 29vh;
-}
-
-.h-\[446px\] {
-  height: 446px;
 }
 
 .h-\[64px\] {
   height: 64px;
 }
 
+.h-\[6vh\] {
+  height: 6vh;
+}
+
 .h-auto {
   height: auto;
 }
@@ -923,54 +923,6 @@ video {
   height: 100vh;
 }
 
-.h-\[320px\] {
-  height: 320px;
-}
-
-.h-\[220px\] {
-  height: 220px;
-}
-
-.h-\[100px\] {
-  height: 100px;
-}
-
-.h-\[25vh\] {
-  height: 25vh;
-}
-
-.h-\[18vh\] {
-  height: 18vh;
-}
-
-.h-\[7vh\] {
-  height: 7vh;
-}
-
-.h-\[30vh\] {
-  height: 30vh;
-}
-
-.h-\[22vh\] {
-  height: 22vh;
-}
-
-.h-\[8vh\] {
-  height: 8vh;
-}
-
-.h-\[29vh\] {
-  height: 29vh;
-}
-
-.h-\[21vh\] {
-  height: 21vh;
-}
-
-.h-\[6vh\] {
-  height: 6vh;
-}
-
 .h-\[31vh\] {
   height: 31vh;
 }
@@ -983,6 +935,10 @@ video {
   height: 32vh;
 }
 
+.h-\[25vh\] {
+  height: 25vh;
+}
+
 .h-\[95vh\] {
   height: 95vh;
 }
@@ -1111,10 +1067,6 @@ video {
   max-width: 20rem;
 }
 
-.max-w-4xl {
-  max-width: 56rem;
-}
-
 .max-w-full {
   max-width: 100%;
 }
@@ -1248,14 +1200,14 @@ video {
   gap: 1.5rem;
 }
 
-.gap-8 {
-  gap: 2rem;
-}
-
 .gap-7 {
   gap: 1.75rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .space-x-10 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2.5rem * var(--tw-space-x-reverse));
@@ -1292,12 +1244,6 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
-.space-y-16 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
-}
-
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1322,6 +1268,12 @@ video {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1688,10 +1640,6 @@ video {
   padding-right: 1.5rem;
 }
 
-.pt-0 {
-  padding-top: 0px;
-}
-
 .pt-12 {
   padding-top: 3rem;
 }
@@ -1716,6 +1664,10 @@ video {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .text-justify {
   text-align: justify;
 }
@@ -1772,6 +1724,10 @@ video {
   line-height: 1rem;
 }
 
+.text-\[10px\] {
+  font-size: 10px;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -2051,6 +2007,10 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.last\:border-b-0:last-child {
+  border-bottom-width: 0px;
+}
+
 .hover\:-translate-y-0\.5:hover {
   --tw-translate-y: -0.125rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2390,90 +2350,18 @@ video {
     margin-left: 2rem;
   }
 
-  .lg\:mt-16 {
-    margin-top: 4rem;
-  }
-
   .lg\:mt-8 {
     margin-top: 2rem;
   }
 
-  .lg\:h-\[70vh\] {
-    height: 70vh;
-  }
-
-  .lg\:h-\[90vh\] {
-    height: 90vh;
-  }
-
-  .lg\:h-\[50vh\] {
-    height: 50vh;
-  }
-
-  .lg\:h-\[600px\] {
-    height: 600px;
-  }
-
-  .lg\:h-\[500px\] {
-    height: 500px;
-  }
-
-  .lg\:h-\[85vh\] {
-    height: 85vh;
-  }
-
-  .lg\:h-\[60vh\] {
-    height: 60vh;
-  }
-
   .lg\:h-\[65vh\] {
     height: 65vh;
   }
 
-  .lg\:min-h-screen {
-    min-height: 100vh;
-  }
-
-  .lg\:min-h-\[90vh\] {
-    min-height: 90vh;
-  }
-
-  .lg\:min-h-\[100vh\] {
-    min-height: 100vh;
-  }
-
-  .lg\:min-h-\[150vh\] {
-    min-height: 150vh;
-  }
-
-  .lg\:min-h-\[900px\] {
-    min-height: 900px;
-  }
-
-  .lg\:min-h-\[800px\] {
-    min-height: 800px;
-  }
-
-  .lg\:min-h-\[700px\] {
-    min-height: 700px;
-  }
-
-  .lg\:min-h-\[600px\] {
-    min-height: 600px;
-  }
-
-  .lg\:min-h-\[60vh\] {
-    min-height: 60vh;
-  }
-
   .lg\:min-h-\[65vh\] {
     min-height: 65vh;
   }
 
-  .lg\:min-h-\[80vh\] {
-    min-height: 80vh;
-  }
-
   .lg\:w-36 {
     width: 9rem;
   }
@@ -2510,18 +2398,6 @@ video {
     gap: 2rem;
   }
 
-  .lg\:space-y-10 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
-  }
-
-  .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
-  }
-
   .lg\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2545,11 +2421,6 @@ video {
     padding-top: 12rem;
   }
 
-  .lg\:text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-
   .lg\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
@@ -2570,11 +2441,6 @@ video {
     line-height: 1.75rem;
   }
 
-  .lg\:text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
-
   .lg\:leading-snug {
     line-height: 1.375;
   }