@{
    Layout = "_Layout";

    ViewData["Title"] = "Suku Dinas Jakarta Selatan - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Suku Dinas Jakarta Selatan bertanggung jawab mengelola dan mengawasi program lingkungan hidup di wilayah Jakarta Selatan - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "Bidang, Suku Dinas dan UPT, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Suku Dinas Jakarta Selatan - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Suku Dinas Jakarta Selatan bertanggung jawab mengelola dan mengawasi program lingkungan hidup di wilayah Jakarta Selatan";
    ViewData["TwitterTitle"] = "Suku Dinas Jakarta Selatan - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Suku Dinas Jakarta Selatan bertanggung jawab mengelola dan mengawasi program lingkungan hidup di wilayah Jakarta Selatan";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Suku Dinas Jakarta Selatan";
    ViewData["TitleBeforeHighlight"] = "Suku Dinas";
    ViewData["TitleHighlight"] = "Jakarta Selatan";
}
    <!-- Breadcumb -->
    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
<section class="container mx-auto max-w-6xl py-8">
    <!-- Hero Section -->
    <div class="text-center py-8">
        <h2 class="text-3xl font-bold text-gray-800 mb-4">Suku Dinas Jakarta Selatan</h2>
        <p class="text-gray-600 max-w-2xl mx-auto leading-relaxed">
           Suku Dinas Jakarta Selatan bertanggung jawab mengelola dan mengawasi program lingkungan hidup di wilayah Jakarta Selatan 
        </p>
    </div>
<div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-2/3 px-4">  
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div class="col-span-1">
                        <a href="/seputar-dlh/detail-artikel" class="block bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 no-underline text-gray-900">
                            <div class="relative">
                                <img src="https://lingkunganhidup.jakarta.go.id/uploads/35114-2025-01-02-02-27-53.jpeg" class="w-full h-48 object-cover" alt="Berita">
                            </div>
                            <div class="p-4">
                                <h5 class="text-lg font-semibold mb-2">Dummy</h5>
                                <p class="text-gray-600 mb-3">Dummy</p>
                                <div class="flex justify-between items-center">
                                    <small class="text-gray-500">12-Juni-2025 • Admin</small>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-span-1">
                        <a href="/seputar-dlh/detail-artikel" class="block bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 no-underline text-gray-900">
                            <div class="relative">
                                <img src="https://lingkunganhidup.jakarta.go.id/uploads/35114-2025-01-02-02-27-53.jpeg" class="w-full h-48 object-cover" alt="Berita">
                            </div>
                            <div class="p-4">
                                <h5 class="text-lg font-semibold mb-2">Dummy</h5>
                                <p class="text-gray-600 mb-3">Dummy</p>
                                <div class="flex justify-between items-center">
                                    <small class="text-gray-500">12-Juni-2025 • Admin</small>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-span-1">
                        <a href="/seputar-dlh/detail-artikel" class="block bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 no-underline text-gray-900">
                            <div class="relative">
                                <img src="https://lingkunganhidup.jakarta.go.id/uploads/35114-2025-01-02-02-27-53.jpeg" class="w-full h-48 object-cover" alt="Berita">
                            </div>
                            <div class="p-4">
                                <h5 class="text-lg font-semibold mb-2">Dummy</h5>
                                <p class="text-gray-600 mb-3">Dummy</p>
                                <div class="flex justify-between items-center">
                                    <small class="text-gray-500">12-Juni-2025 • Admin</small>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-span-1">
                        <a href="/seputar-dlh/detail-artikel" class="block bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 no-underline text-gray-900">
                            <div class="relative">
                                <img src="https://lingkunganhidup.jakarta.go.id/uploads/35114-2025-01-02-02-27-53.jpeg" class="w-full h-48 object-cover" alt="Berita">
                            </div>
                            <div class="p-4">
                                <h5 class="text-lg font-semibold mb-2">Dummy</h5>
                                <p class="text-gray-600 mb-3">Dummy</p>
                                <div class="flex justify-between items-center">
                                    <small class="text-gray-500">12-Juni-2025 • Admin</small>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-span-1">
                        <a href="/seputar-dlh/detail-artikel" class="block bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 no-underline text-gray-900">
                            <div class="relative">
                                <img src="https://lingkunganhidup.jakarta.go.id/uploads/35114-2025-01-02-02-27-53.jpeg" class="w-full h-48 object-cover" alt="Berita">
                            </div>
                            <div class="p-4">
                                <h5 class="text-lg font-semibold mb-2">Dummy</h5>
                                <p class="text-gray-600 mb-3">Dummy</p>
                                <div class="flex justify-between items-center">
                                    <small class="text-gray-500">12-Juni-2025 • Admin</small>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-span-1">
                        <a href="/seputar-dlh/detail-artikel" class="block bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 no-underline text-gray-900">
                            <div class="relative">
                                <img src="https://lingkunganhidup.jakarta.go.id/uploads/35114-2025-01-02-02-27-53.jpeg" class="w-full h-48 object-cover" alt="Berita">
                            </div>
                            <div class="p-4">
                                <h5 class="text-lg font-semibold mb-2">Dummy</h5>
                                <p class="text-gray-600 mb-3">Dummy</p>
                                <div class="flex justify-between items-center">
                                    <small class="text-gray-500">12-Juni-2025 • Admin</small>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 px-4">
                <div class="bg-white rounded-lg shadow-sm mb-6">
                    <div class="p-6">
                        <h4 class="text-xl font-semibold mb-4">Satuan Pelaksana</h4>
                        <p class="py-2">Satpel 1</p>
                        <hr class="border-gray-200">
                        <p class="py-2">Satpel 1</p>
                        <hr class="border-gray-200">
                        <p class="py-2">Satpel 1</p>
                        <hr class="border-gray-200">
                        <p class="py-2">Satpel 1</p>
                        <hr class="border-gray-200">
                        <p class="py-2">Satpel 1</p>
                        <hr class="border-gray-200">
                        <p class="py-2">Satpel 1</p>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-sm mb-6">
                    <div class="p-6">
                        <h4 class="text-xl font-semibold mb-4">Alamat</h4>
                        <div class="flex items-center">
                            <p class="text-gray-600 text-justify">Jl. Raya Kalimalang No.4F Blok E, RT.2/RW.16, Duren Sawit, Durensawit, East Jakarta City, Jakarta 13440</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</section>