diff --git a/layouts/partials/footer/debug.html b/layouts/partials/footer/debug.html
index 517e24acc2bdd17c1432373b862a101f2cc3cacf..c0f243d2e76f62be9ace6e4ef05132392da00a06 100644
--- a/layouts/partials/footer/debug.html
+++ b/layouts/partials/footer/debug.html
@@ -22,9 +22,11 @@
   <div><span>5 (256px) </span></div>
 </div>
 
+<div class="d-cross"></div>
 <style>
   :root {
     --d-grid-margin: 64px;
+    --d-grid-sm-margin: 44px;
   }
   .d-grid {
     bottom: 0;
@@ -107,6 +109,44 @@
   .d-spacing > div:nth-child(6){
     height: var(--spacing5);
   }
+  .d-cross {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 2px;
+    height: 2px;
+    background: gray;
+    display: none;
+    z-index: 100;
+  }
+  .d-cross.is-visible {
+    display: block;
+  }
+  .d-cross:after, .d-cross:before{
+    content: '';
+    position: absolute;
+    background: gray;
+    transform: translate(-50%, -50%);
+    width: 1px;
+    height: 1px;
+  }
+  .d-cross:after{
+    height: 200vh;
+  }
+  .d-cross:before{
+    width: 200vw;
+  }
+
+  @media (max-width: 768px) {
+    .d-grid > div {
+      display: none;
+    }
+    .d-grid {
+      border-left: calc(var(--d-grid-sm-margin) / 2) solid fuchsia;
+      border-right: calc(var(--d-grid-sm-margin) / 2) solid fuchsia;
+    }
+  }
+
 </style>
 
 <script>
@@ -114,9 +154,14 @@
     if (e.ctrlKey && e.key === 'g') {
       document.querySelector('.d-grid').classList.toggle('is-visible');
       document.querySelector('.d-spacing').classList.toggle('is-visible');
+      document.querySelector('.d-cross').classList.toggle('is-visible');
     }
     if (e.ctrlKey && e.key === 'w') {
       document.body.classList.toggle('full-width');
     }
   });
+  window.addEventListener('pointermove', e => {
+    document.querySelector('.d-cross').style.left = e.clientX + "px";
+    document.querySelector('.d-cross').style.top = e.clientY + "px";
+  })
 </script>
\ No newline at end of file