updated Grid and pages using grid, changed logo image to an svg, updated favicon logic

src/components/layout/Grid.svelte

@@ -2,6 +2,7 @@
   let {
     min = "220px", // min column width (used when columns not set)
     columns = null, // fixed number of columns for desktop
+    tabletColumns = null, // fixed number of columns for tablet / mid screens
     largeColumns = null, // fixed number of columns for large desktop
     mobileColumns = null, // fixed number of columns for mobile
     gap = "gap-3",
@@ -9,6 +10,10 @@
     children,
   } = $props();
 
+  const hasTabletColumns = $derived(tabletColumns !== null);
+  const tabletCols = $derived(
+    tabletColumns ? `repeat(${tabletColumns}, 1fr)` : "1fr"
+  );
   const desktopColumns = $derived(columns ? `repeat(${columns}, 1fr)` : "1fr");
   const largeDesktopColumns = $derived(
     largeColumns ? `repeat(${largeColumns}, 1fr)` : desktopColumns
@@ -18,8 +23,10 @@
 
 <div
   class="grid {className} {gap}"
+  data-has-tablet={hasTabletColumns ? "true" : "false"}
   style="
     --min: {min}; 
+    --tablet-columns: {tabletCols};
     --desktop-columns: {desktopColumns};
     --large-desktop-columns: {largeDesktopColumns};
     --mobile-columns: {mobileCols};
@@ -35,20 +42,44 @@
     grid-template-columns: var(--mobile-columns);
   }
 
-  /* Desktop / tablet screens */
+  /* Legacy mode (no tabletColumns): desktop starts at 768px */
   @media (min-width: 768px) {
-    .grid {
+    .grid[data-has-tablet="false"] {
       grid-template-columns: var(--desktop-columns) !important;
     }
 
     /* fallback for when columns are not set, use minmax */
-    .grid:not([style*="--desktop-columns: repeat"]) {
+    .grid[data-has-tablet="false"]:not([style*="--desktop-columns: repeat"]) {
+      grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr)) !important;
+    }
+
+    /* Tablet mode (when tabletColumns is provided) */
+    .grid[data-has-tablet="true"] {
+      grid-template-columns: var(--tablet-columns) !important;
+    }
+  }
+
+  /* Legacy large desktop */
+  @media (min-width: 1024px) {
+    .grid[data-has-tablet="false"] {
+      grid-template-columns: var(--large-desktop-columns) !important;
+    }
+  }
+
+  /* Tablet mode desktop breakpoint */
+  @media (min-width: 1200px) {
+    .grid[data-has-tablet="true"] {
+      grid-template-columns: var(--desktop-columns) !important;
+    }
+
+    .grid[data-has-tablet="true"]:not([style*="--desktop-columns: repeat"]) {
       grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr)) !important;
     }
   }
 
-  @media (min-width: 1024px) {
-    .grid {
+  /* Tablet mode large desktop breakpoint */
+  @media (min-width: 1536px) {
+    .grid[data-has-tablet="true"] {
       grid-template-columns: var(--large-desktop-columns) !important;
     }
   }