.windowpane {
  container-type: inline-size;
}

.windowpane-pattern {
  --line-weight: 4px;
  --cell: calc((100cqw - var(--line-weight)) / var(--columns));
  height: calc(var(--cell) * var(--rows) + var(--line-weight));
  background-image:
    linear-gradient(to right, var(--line-color) var(--line-weight), transparent var(--line-weight)),
    linear-gradient(to bottom, var(--line-color) var(--line-weight), transparent var(--line-weight));
  background-size: var(--cell) var(--cell);
}

@media (max-width: 767px) {
  .windowpane-pattern {
    --cell: calc((100cqw - var(--line-weight)) / var(--columns-mobile));
    height: calc(var(--cell) * var(--rows-mobile) + var(--line-weight));
  }
}