Visual responsive grid helper with pseudo element

debug-grid.css

@import '../base/_sizes.pcss';
@import '../base/_color.pcss';

body.debug {

  &::after {
    position: fixed;
    content: '';
    width: auto;
    max-width: 100%;
    height: 100vh;
    top: 0;
    left: calc(99.9% * 1 / 12 - (20px - 20px * 1 / 12));
    right: calc(99.9% * 1 / 12 - (20px - 20px * 1 / 12));
    z-index: 9999;
    opacity: .1;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      90deg,
      var(--red),
      var(--red) calc(99.9% * 1 / 12 - (20px - 20px * 1 / 12)),
      transparent calc(99.9% * 1 / 12 - (20px - 20px * 1 / 12)),
      transparent calc(99.9% * 1 / 12 - (20px - 20px * 1 / 12) + 20px)
    );

    @media (width <= 768px) {
      background-image: repeating-linear-gradient(
        90deg,
        var(--red),
        var(--red) calc(99.9% * 1 / 4 - (10px - 10px * 1 / 4)),
        transparent calc(99.9% * 1 / 4 - (10px - 10px * 1 / 4)),
        transparent calc(99.9% * 1 / 4 - (10px - 10px * 1 / 4) + 10px)
      );

    }

  }

  .header {
    background: color(var(--red) a(20%));
  }

}