Only render the last components if there is anything to show, otherwise just show nothing

astro/src/components/web/LastAlbums.astro

@@ -25,7 +25,7 @@ const lastAlbums = await getLastAlbums(albums.amount);
 const size = calculateSizeClasses(albums.amount, lastAlbums.length);
 ---
 
-{ settings.photo.enabled && (
+{ (settings.photo.enabled && lastAlbums.length > 0) && (
 <div
     id={`lastalbums-${albums.id}`}
     class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"

astro/src/components/web/LastBlogs.astro

@@ -25,7 +25,7 @@ const lastBlogs = await getLastBlogs(blogs.amount);
 const size = calculateSizeClasses(blogs.amount, lastBlogs.length);
 ---
 
-{ settings.blog.enabled && (
+{ (settings.blog.enabled && lastBlogs.length > 0) && (
 <div
     id={`lastblogs-${blogs.id}`}
     class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"

astro/src/components/web/LastProjects.astro

@@ -25,7 +25,7 @@ const lastProjects = await getLastProjects(projects.amount);
 const size = calculateSizeClasses(projects.amount, lastProjects.length);
 ---
 
-{ settings.project.enabled && (
+{ (settings.project.enabled && lastProjects.length > 0) && (
 <div
     id={`lastprojects-${projects.id}`}
     class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"