:root {
    --grid-size-mm: 5;
    --grid-size: round(up, var(--grid-size-mm) *  3.7795275591px, 1px); /* 5mm-ish, rounded */
}

.wrapper-body {
    display: grid;
    grid-template: 1fr / 0.25fr 1fr;
    height: 100vh;
}

.wrapper-editor {
    background-color: whitesmoke;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    overflow: scroll;
    padding-top: 40px;
    padding-bottom: 40px;
}

.editor-paper {
    width: 210mm;
    height: 297mm;
    background-color: white;
    position: relative;
    overflow: hidden;
    break-after: page;
    box-shadow: 0px 0px 20px -15px black;
}

.markup-block {
    position: absolute;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    border: solid 1px #ccc;
    background-color: white;
}

.selected-element {
    border: solid 1px blue;
}

#page1:hover, .show-grid {
    position: relative;
    background-image:
      linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);

    background-size: var(--grid-size) var(--grid-size);
}