update detail berita

.gitignore

@@ -0,0 +1,3 @@
+/obj
+/publish
+/node_modules

Controllers/SeputarController.cs

@@ -11,6 +11,12 @@ namespace MyApp.Namespace
             return View();
         }
 
+        [HttpGet("detail-berita")]
+        public IActionResult DetailBerita()
+        {
+            return View();
+        }
+
         [HttpGet("video")]
         public IActionResult Video()
         {

Views/Seputar/DetailBerita.cshtml

@@ -16,5 +16,186 @@
 }
 
 <!-- Breadcumb -->
-<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+@* <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" /> *@
 
+<section class="py-10 bg-gray-50">
+    <div class="container mx-auto max-w-6xl">
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Main Content -->
+            <div class="w-full md:w-3/4">
+                <div class="bg-white rounded-2xl shadow p-6">
+                    <img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="Berita" class="w-full aspect-[2/1] rounded-2xl mb-6 object-cover"></h1>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
+                        DLH Siagakan 1.050 Petugas Pastikan Kebersihan Jakarta Saat Hari Buruh
+                    </h1>
+                    <div class="flex items-center text-sm text-gray-500 mb-4 gap-3">
+                        <span>Selasa, 27 May 2025</span>
+                        <span>|</span>
+                        <span>47 views</span>
+                        <span class="flex items-center gap-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="inline w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41 0.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+                            57 likes
+                        </span>
+                    </div>
+                    <div class="prose max-w-none text-gray-700">
+                        <article class="text-justify">
+                            JAKARTA – Dinas Lingkungan Hidup DKI Jakarta siagakan sebanyak 1.050 petugas kebersihan saat puncak peringatan Hari Buruh (May Day) di Lapangan Monumen Nasional (Monas) pada Kamis (1/5). Ribuan petugas akan disiagakan untuk memastikan penanganan sampah saat peringatan May Day yang dihadiri 200.000 massa buruh, termasuk direncanakan akan dihadiri juga oleh Presiden Republik Indonesia Prabowo Subianto. Kepala Dinas Lingkungan Hidup DKI Jakarta Asep Kuswanto mengatakan, selain menyiagakan ribuan personel, pihaknya mengerahkan sarana prasarana kebersihan yang difokuskan di sekitar Monas, taman Monas, dan area-area kantung parkir yang terletak di Lapangan Banteng serta Kawasan Gelora Bung Karno (GBK). “Kami menyiapkan 10 unit kendaraan penyapu jalan otomatis (road sweeper), 12 unit truk sampah anorganik atau jenis typer, 15 unit mobil lintas, 70 dust bin, 20 bus toilet, 600 buah kantong plastik serta 600 sapu lidi,” ungkapnya. Selain itu, ribuan personel yang dikerahkan berasal dari 5 (lima) Suku Dinas LH Kota Administrasi dan UPS Badan Air. Mereka siap merespon cepat jika terjadi penumpukan sampah. Bus toilet juga akan ditempatkan di titik-titik yang dekat dengan panggung utama dan jalur padat pengunjung untuk memastikan kenyamanan massa buruh. “Demi penanganan kebersihan yang maksimal selama peringatan Hari Buruh, para petugas akan dibagi menjadi 2 (dua) shift. Shift pertama pukul 08.00 sampai 15.00 WIB oleh petugas kebersihan dari Sudin LH Jakarta Pusat. Sedangkan pada shift kedua pukul 13.00 WIB hingga kegiatan selesai akan ditugaskan personel dari 5 (lima) Sudin LH Kota Administrasi dan personel dari UPS BA,” tambahnya. Asep juga mengimbau kepada warga yang menghadiri Hari Buruh untuk selalu menjaga kebersihan dan tidak membuang sampah sembarang selama kegiatan berlangsung. Hal tersebut juga merupakan tanggung jawab kolektif terhadap lingkungan. “Besar harapan seluruh kegiatan pada Hari Buruh dapat berlangsung tertib, damai dan bersih. Mari sama-sama menjaga ruang publik yang dimiliki Kota Jakarta agar tetap bersih, nyaman, serta aman bagi seluruh warga,” pungkasnya.
+                        </article>
+                    </div>
+                </div>
+            </div>
+            <!-- Sidebar -->
+            <aside class="w-full md:w-1/4 flex flex-col gap-8">
+                <!-- Kategori -->
+                <div class="bg-white rounded-2xl shadow p-6">
+                    <h2 class="text-xl font-bold mb-4">Kategori</h2>
+                    <div class="flex flex-wrap gap-2">
+                        <a href="#" class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-green-100 text-green-800 hover:bg-green-200 transition-colors">Semua</a>
+                        <a href="#" class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-green-100 text-green-800 hover:bg-green-200 transition-colors">Lingkungan</a>
+                        <a href="#" class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-green-100 text-green-800 hover:bg-green-200 transition-colors">Kebersihan</a>
+                        <a href="#" class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-green-100 text-green-800 hover:bg-green-200 transition-colors">Persampahan</a>
+                    </div>
+                </div>
+                <!-- Artikel Terkait -->
+                <div class="bg-white rounded-2xl shadow p-6">
+                    <h2 class="text-xl font-bold mb-4">Artikel Terkait</h2>
+                    <ul class="space-y-4">
+                        <li class="flex gap-3 items-center">
+                            <img src="@Url.Content("~/assets/images/home/berita1.jpg")" class="w-20 h-10 rounded-lg object-cover" alt="Related 1">
+                            <a href="#" class="text-xs font-medium text-gray-900 hover:text-green-600" data-full-title="Pertamina Lubricants Dorong Efisiensi Operasional Kapal di Indonesia Maritime Week 2025">
+                                <span class="truncated-title">Pertamina Lubricants Dorong...</span>
+                            </a>
+                        </li>
+                        <li class="flex gap-3 items-center">
+                            <img src="@Url.Content("~/assets/images/home/berita1.jpg")" class="w-20 h-10 rounded-lg object-cover" alt="Related 2">
+                            <a href="#" class="text-xs font-medium text-gray-900 hover:text-green-600" data-full-title="Pertamina Lubricants Peduli Korban Banjir di Kabupaten Trenggalek">
+                                <span class="truncated-title">Pertamina Lubricants Peduli...</span>
+                            </a>
+                        </li>
+                        <li class="flex gap-3 items-center">
+                            <img src="@Url.Content("~/assets/images/home/berita1.jpg")" class="w-20 h-10 rounded-lg object-cover" alt="Related 3">
+                            <a href="#" class="text-xs font-medium text-gray-900 hover:text-green-600" data-full-title="Pertamina Lubricants berhasil meraih peringkat EMAS dalam ajang Indonesia Mining Awards 2024">
+                                <span class="truncated-title">Pertamina Lubricants berha...</span>
+                            </a>
+                        </li>
+                        <li class="flex gap-3 items-center">
+                            <img src="@Url.Content("~/assets/images/home/berita1.jpg")" class="w-20 h-10 rounded-lg object-cover" alt="Related 3">
+                            <a href="#" class="text-xs font-medium text-gray-900 hover:text-green-600" data-full-title="Pertamina Lubricants berhasil meraih peringkat EMAS dalam ajang Indonesia Mining Awards 2024">
+                                <span class="truncated-title">Pertamina Lubricants berha...</span>
+                            </a>
+                        </li>
+                        <li class="flex gap-3 items-center">
+                            <img src="@Url.Content("~/assets/images/home/berita1.jpg")" class="w-20 h-10 rounded-lg object-cover" alt="Related 3">
+                            <a href="#" class="text-xs font-medium text-gray-900 hover:text-green-600" data-full-title="Pertamina Lubricants berhasil meraih peringkat EMAS dalam ajang Indonesia Mining Awards 2024">
+                                <span class="truncated-title">Pertamina Lubricants berha...</span>
+                            </a>
+                        </li>
+                        <li class="flex gap-3 items-center">
+                            <img src="@Url.Content("~/assets/images/home/berita1.jpg")" class="w-20 h-10 rounded-lg object-cover" alt="Related 3">
+                            <a href="#" class="text-xs font-medium text-gray-900 hover:text-green-600" data-full-title="Pertamina Lubricants berhasil meraih peringkat EMAS dalam ajang Indonesia Mining Awards 2024">
+                                <span class="truncated-title">Pertamina Lubricants berha...</span>
+                            </a>
+                        </li>
+                    </ul>
+
+                </div>
+            </aside>
+            </div>
+            <!-- Tags and Share Section -->
+            <div class="w-full">
+                <div class="bg-white rounded-2xl shadow p-6 mt-8">
+                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                        <!-- Tags Section -->
+                        <div class="flex flex-wrap items-center gap-2">
+                            <span class="text-sm font-medium text-gray-600">Tag:</span>
+                            <a href="#" class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-green-100 text-green-800 hover:bg-green-200 transition-colors">
+                                Kebersihan
+                            </a>
+                            <a href="#" class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-green-100 text-green-800 hover:bg-green-200 transition-colors">
+                                Hari Buruh
+                            </a>
+                            <a href="#" class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-green-100 text-green-800 hover:bg-green-200 transition-colors">
+                                DLH Jakarta
+                            </a>
+                            <a href="#" class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-green-100 text-green-800 hover:bg-green-200 transition-colors">
+                                Monas
+                            </a>
+                        </div>
+                        
+                        <!-- Share Section -->
+                        <div class="flex items-center gap-3">
+                            <span class="text-sm font-medium text-gray-600">Bagikan:</span>
+                            <div class="flex gap-2">
+                                <a href="#" onclick="shareToLinkedIn()" class="flex items-center justify-center w-10 h-10 bg-green-500 text-white rounded-full hover:bg-green-600 transition-colors">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                        <path d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"/>
+                                    </svg>
+                                </a>
+                                <a href="#" onclick="shareToWhatsApp()" class="flex items-center justify-center w-10 h-10 bg-green-500 text-white rounded-full hover:bg-green-600 transition-colors">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.525 3.507"/>
+                                    </svg>
+                                </a>
+                                <a href="#" onclick="shareToFacebook()" class="flex items-center justify-center w-10 h-10 bg-green-500 text-white rounded-full hover:bg-green-600 transition-colors">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+                                    </svg>
+                                </a>
+                                <a href="#" onclick="shareToTwitter()" class="flex items-center justify-center w-10 h-10 bg-green-500 text-white rounded-full hover:bg-green-600 transition-colors">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<register-block dynamic-section="scripts" key="jsDetailBerita">
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const maxLength = 50;
+        const truncatedTitles = document.querySelectorAll('.truncated-title');
+        
+        truncatedTitles.forEach(function(element) {
+            const link = element.closest('a');
+            const fullTitle = link.getAttribute('data-full-title');
+            
+            if (fullTitle && fullTitle.length > maxLength) {
+                element.textContent = fullTitle.substring(0, maxLength - 3) + '...';
+            } else {
+                element.textContent = fullTitle;
+            }
+        });
+    });
+</script>
+<script>
+function shareToFacebook() {
+    const url = encodeURIComponent(window.location.href);
+    const title = encodeURIComponent(document.querySelector('h1').textContent);
+    window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
+}
+
+function shareToTwitter() {
+    const url = encodeURIComponent(window.location.href);
+    const title = encodeURIComponent(document.querySelector('h1').textContent);
+    window.open(`https://twitter.com/intent/tweet?url=${url}&text=${title}`, '_blank', 'width=600,height=400');
+}
+
+function shareToWhatsApp() {
+    const url = encodeURIComponent(window.location.href);
+    const title = encodeURIComponent(document.querySelector('h1').textContent);
+    window.open(`https://wa.me/?text=${title}%20${url}`, '_blank');
+}
+
+function shareToLinkedIn() {
+    const url = encodeURIComponent(window.location.href);
+    const title = encodeURIComponent(document.querySelector('h1').textContent);
+    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'width=600,height=400');
+}
+</script>
+</register-block>

obj/Debug/net9.0/dlh-net.AssemblyInfo.cs

@@ -13,7 +13,7 @@ using System.Reflection;
 [assembly: System.Reflection.AssemblyCompanyAttribute("dlh-net")]
 [assembly: System.Reflection.AssemblyConfigurationAttribute("Debug")]
 [assembly: System.Reflection.AssemblyFileVersionAttribute("1.0.0.0")]
-[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+ce6b09a951eabe1d771c3062f5b20e6853a5712f")]
+[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+ff1e690e639e593fb7c48a05abf04e6ab2784e52")]
 [assembly: System.Reflection.AssemblyProductAttribute("dlh-net")]
 [assembly: System.Reflection.AssemblyTitleAttribute("dlh-net")]
 [assembly: System.Reflection.AssemblyVersionAttribute("1.0.0.0")]

obj/Debug/net9.0/dlh-net.AssemblyInfoInputs.cache

@@ -1 +1 @@
-50241745ee749d4cb358417c1d708ab3089752260da74657a5b4bd229d9f74f3
+9320b1932c42f2004150973455cfc96d276d347acf81bb8fde03b7547117632f

wwwroot/css/output.css

@@ -888,6 +888,9 @@
   .table-row {
     display: table-row;
   }
+  .aspect-\[2\/1\] {
+    aspect-ratio: 2/1;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -1075,6 +1078,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
@@ -1159,6 +1165,9 @@
   .max-w-md {
     max-width: var(--container-md);
   }
+  .max-w-none {
+    max-width: none;
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -1759,6 +1768,9 @@
   .bg-amber-600 {
     background-color: var(--color-amber-600);
   }
+  .bg-amber-800 {
+    background-color: var(--color-amber-800);
+  }
   .bg-black {
     background-color: var(--color-black);
   }
@@ -1783,6 +1795,9 @@
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
+  .bg-blue-800 {
+    background-color: var(--color-blue-800);
+  }
   .bg-cyan-50 {
     background-color: var(--color-cyan-50);
   }
@@ -2551,6 +2566,9 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -2692,6 +2710,9 @@
   .text-end {
     text-align: end;
   }
+  .text-justify {
+    text-align: justify;
+  }
   .text-left {
     text-align: left;
   }
@@ -2858,6 +2879,9 @@
   .text-blue-800 {
     color: var(--color-blue-800);
   }
+  .text-blue-900 {
+    color: var(--color-blue-900);
+  }
   .text-cyan-600 {
     color: var(--color-cyan-600);
   }
@@ -3675,6 +3699,13 @@
       }
     }
   }
+  .hover\:bg-amber-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-amber-600);
+      }
+    }
+  }
   .hover\:bg-amber-700 {
     &:hover {
       @media (hover: hover) {
@@ -3682,6 +3713,13 @@
       }
     }
   }
+  .hover\:bg-amber-900 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-amber-900);
+      }
+    }
+  }
   .hover\:bg-blue-100 {
     &:hover {
       @media (hover: hover) {
@@ -3703,6 +3741,13 @@
       }
     }
   }
+  .hover\:bg-blue-900 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-900);
+      }
+    }
+  }
   .hover\:bg-cyan-100 {
     &:hover {
       @media (hover: hover) {
@@ -3731,6 +3776,13 @@
       }
     }
   }
+  .hover\:bg-gray-800 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-800);
+      }
+    }
+  }
   .hover\:bg-green-100 {
     &:hover {
       @media (hover: hover) {
@@ -3895,6 +3947,13 @@
       }
     }
   }
+  .hover\:bg-yellow-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-yellow-200);
+      }
+    }
+  }
   .hover\:from-green-100 {
     &:hover {
       @media (hover: hover) {
@@ -3960,6 +4019,13 @@
       }
     }
   }
+  .hover\:text-amber-600 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-amber-600);
+      }
+    }
+  }
   .hover\:text-amber-800 {
     &:hover {
       @media (hover: hover) {
@@ -4242,6 +4308,11 @@
       flex-direction: row;
     }
   }
+  .sm\:px-4 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
   .sm\:px-6 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -4404,11 +4475,21 @@
       width: calc(1/3 * 100%);
     }
   }
+  .md\:w-1\/4 {
+    @media (width >= 48rem) {
+      width: calc(1/4 * 100%);
+    }
+  }
   .md\:w-2\/3 {
     @media (width >= 48rem) {
       width: calc(2/3 * 100%);
     }
   }
+  .md\:w-3\/4 {
+    @media (width >= 48rem) {
+      width: calc(3/4 * 100%);
+    }
+  }
   .md\:w-5 {
     @media (width >= 48rem) {
       width: calc(var(--spacing) * 5);
@@ -4497,6 +4578,11 @@
       align-items: flex-start;
     }
   }
+  .md\:justify-between {
+    @media (width >= 48rem) {
+      justify-content: space-between;
+    }
+  }
   .md\:justify-start {
     @media (width >= 48rem) {
       justify-content: flex-start;
@@ -4743,6 +4829,11 @@
       height: calc(var(--spacing) * 8);
     }
   }
+  .lg\:h-96 {
+    @media (width >= 64rem) {
+      height: calc(var(--spacing) * 96);
+    }
+  }
   .lg\:h-\[35vh\] {
     @media (width >= 64rem) {
       height: 35vh;
@@ -4758,11 +4849,21 @@
       width: calc(1/3 * 100%);
     }
   }
+  .lg\:w-1\/4 {
+    @media (width >= 64rem) {
+      width: calc(1/4 * 100%);
+    }
+  }
   .lg\:w-2\/3 {
     @media (width >= 64rem) {
       width: calc(2/3 * 100%);
     }
   }
+  .lg\:w-3\/4 {
+    @media (width >= 64rem) {
+      width: calc(3/4 * 100%);
+    }
+  }
   .lg\:w-8 {
     @media (width >= 64rem) {
       width: calc(var(--spacing) * 8);
@@ -4877,6 +4978,12 @@
       line-height: var(--tw-leading, var(--text-2xl--line-height));
     }
   }
+  .lg\:text-3xl {
+    @media (width >= 64rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
   .lg\:text-4xl {
     @media (width >= 64rem) {
       font-size: var(--text-4xl);