.dot-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.dot-grid__wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.dot-grid__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body.blog-post {
  position: relative;
  background: var(--bg);
}

.blog-dot-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
}

body.blog-post > *:not(.blog-dot-grid):not(.site-header) {
  position: relative;
  z-index: 1;
}

body.blog-post > header.site-header {
  z-index: 1000;
}

body.blog-post footer {
  background: rgba(19, 19, 19, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}