.booklet {
    width: 100vw !important;
}
.booklet .b-page {
    display: inline-block;
    width: 100vw !important;
    page-break-after: always;
    page-break-inside: avoid;
    margin: 0 !important;
    padding: 0 !important;
}
.booklet .b-wrap {
    width: 100vw !important;
}
.booklet .b-counter {
    display: none;
}
.printable-content, .page-content {
    width: 100vw !important;
}
/*--- For landscape oriented print ---*/
@media print {
    /* Normalize styles */
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        line-height: 1.5;
        color: #000;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    html, body {
        height: 98%;
    }

    /* Hide all elements inside body */
    body * {
        display: none !important;
    }

    /* Force page size to standard A4 */
    @page {
        size: A4;
        margin: 1in;
    }

    .print-stuff{
        display: block !important;
    }
    .print-stuff img {
        -webkit-column-break-inside: avoid !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        max-height: 95vh !important;
        object-fit:contain !important;
        margin: 0 auto !important;
        display: block !important;
        width: 95vw !important;
        /*margin-left: -10vw !important;*/
        margin-left: -5vw !important;
    }

    /* Chrome-Specific styles goes here */
    @media print and (-webkit-min-device-pixel-ratio:0) {
        .print-stuff img {
            margin-left: unset !important;
        }
    }
}

/*--- For portrait oriented print ---*/
@media print and (max-width: 40em) {
    p:has(img) {
        width: 100vw !important;
    }

    .printable-content img {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    img {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        align-self: center;
    }
}