diff --git a/layouts/partials/footer/debug.html b/layouts/partials/footer/debug.html
index 3cb7e41446467e0f41cc8cee7b8e0a6d3911302f..42a55444ea9d64e946631296c29f7735b0f29803 100644
--- a/layouts/partials/footer/debug.html
+++ b/layouts/partials/footer/debug.html
@@ -1,16 +1,16 @@
 <div class="d-grid">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+  <div>7</div>
+  <div>8</div>
+  <div>9</div>
+  <div>10</div>
+  <div>11</div>
+  <div>12</div>
 </div>
 
 <style>
@@ -20,24 +20,26 @@
   .d-grid {
     bottom: 0;
     display: none;
+    grid-gap: var(--d-grid-margin);
     grid-template-columns: repeat(12, 1fr);
+    opacity: 0.5;
+    padding: 0 var(--d-grid-margin);
     pointer-events: none;
     position: fixed;
     margin: auto;
-    width: 1920px;
     max-width: 100%;
     top: 0;
+    width: 1920px;
     z-index: 9999;
-    padding: 0 var(--d-grid-margin);
-    grid-gap: var(--d-grid-margin);
   }
   .d-grid.is-visible {
     display: grid;
   }
   .d-grid > div {
-    background: rgba(0,0,0,0.3);
-    border-left: 1px solid #000;
-    border-right: 1px solid #000;
+    background: fuchsia;
+    border-left: 1px solid yellow;
+    border-right: 1px solid yellow;
+    text-align: center;
   }
 </style>