[data-size="A4"] {
    --size-long: 297mm;
    --size-short: 210mm;
}
[data-size="A5"] {
    --size-long: 210mm;
    --size-short: 148mm;
}
[data-orientation="portrait"],
[data-orientation="portrait"] [data-size]:not([data-orientation]) {
    --page-width: var(--size-short);
    --page-height: var(--size-long);
}
[data-orientation="landscape"],
[data-orientation="landscape"] [data-size]:not([data-orientation]) {
    --page-width: var(--size-long);
    --page-height: var(--size-short);
}

.page, .page-rotate {
    width: var(--page-width);
    height: var(--page-height);

    overflow: hidden;
}

.page[data-split="2"][data-orientation="landscape"] {
    display: flex;
}

.document > .page {
    break-after: always;
    page-break-after: always;
}

@media screen {
    body:not(.print) {
        background-color: lightgray;
    }
    body:not(.print) .document {
        margin: 2rem 0 4rem;
    }
    body:not(.print) .document > :is(.page, .page-rotate) {
        margin: 0 auto;

        background-color: white;
        box-shadow: 0.1cm 0.1cm 0.2cm darkgray;
    }

    body:not(.print) .document > *:not(:first-child) {
        margin-block-start: 1cm;
    }
}

@media print {
    .document[data-orientation="portrait"] >  [data-orientation="landscape"],
    .document[data-orientation="landscape"] > [data-orientation="portrait"]
     {
        --d: calc(var(--page-width) - var(--page-height));

        transform-origin: 50% 50%;
        transform: translate(calc(-0.5 * var(--d)), calc(-0.5 * var(--d)));
        rotate: -90deg;
    }
}