@layer layout {
    /* I. General */
    :root {
        --page-size: 1200px;
        --page-size-narrow: 794px;
        --page-size-wide: 100vw;
        --page-padding: 1.25rem;
        --offset: max(var(--page-padding), calc(50vw - var(--page-size) / 2));
    }

    #site {
        overflow-x: clip;
    }

    #site .site-inner {
        --height: 100vh;
        --height: 100svh;
        --height: 100dvh;
        min-height: var(--height);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    #site .site-content {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        padding-inline: var(--page-padding);
    }

    .editor-styles-wrapper .is-root-container {
        overflow-x: clip;
        padding-inline: var(--page-padding);
    }

    /* II. Page Wrapper */
    .editor-styles-wrapper .is-root-container > .block-editor-block-list__block,
    .wrap {
        --size: var(--page-size);
        --offset: max(var(--page-padding), calc(50vw - var(--size) / 2));
        width: 100%;
        max-width: var(--size);
        margin: 0 auto;
    }

    .editor-styles-wrapper .is-root-container > .block-editor-block-list__block.narrow,
    .wrap.narrow {
        --size: var(--page-size-narrow);
    }

    .editor-styles-wrapper .is-root-container > .block-editor-block-list__block.wide,
    .wrap.wide {
        --size: var(--page-size-wide);
    }

    .wrap .wrap {
        margin: 0 !important;
        padding: 0 !important;
        width: unset !important;
        max-width: unset !important;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

    /* III. Flexbox Wrapper  */
    .flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1.25rem;
    }

    .flex.no-gap {
        gap: 0;
    }

    .flex.fd-row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }

    .flex.fd-row-r {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
    }

    .flex.fd-column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .flex.fd-column-r {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }

    .flex.fw-wrap {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }

    .flex.fw-nowrap {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    }

    .flex.fw-wrap-r {
        -ms-flex-wrap: wrap-reverse;
            flex-wrap: wrap-reverse;
    }

    .flex.ai-start {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }

    .flex.ai-end {
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
    }

    .flex.ai-center {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .flex.ai-baseline {
        -webkit-box-align: baseline;
            -ms-flex-align: baseline;
                align-items: baseline;
    }

    .flex.jc-left {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }

    .flex.jc-right {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
    }

    .flex.jc-center {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .flex.jc-baseline {
        -webkit-box-pack: baseline;
            -ms-flex-pack: baseline;
                justify-content: baseline;
    }

    .flex.jc-between {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .flex.jc-around {
        -ms-flex-pack: distribute;
            justify-content: space-around;
    }

    .flex.jc-evenly {
        -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
    }

    /* IV. Buttons Wrapper */
    .buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 1.5rem;
    }

    /* V. Text Content Wrapper */
    .text-content {
        --gap: 2.5rem;
    }

    .text-content > * {
        margin-block: 0 var(--gap);
    }

    .text-content > :last-child {
        margin-bottom: 0;
    }

    .text-content .aligncenter {
        margin-inline: auto;
    }

    .text-content :is(ul, ol) {
        padding-left: 1.375rem;
    }

    .text-content :is(ul, ol) li:not(:last-child) {
        margin-bottom: 1.5rem;
    }
    
    /* VI. Media Wrapper */
    :has(> .media-wrapper.background) {
        position: relative;
        isolation: isolate;
    }

    .media-wrapper.background {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        z-index: -1;
    }

    .media-wrapper.background img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }

    .media-wrapper.background :is(video, iframe) {
        display: block;
        width: 100% !important;
        height: 100% !important;
        min-width: 100%;
        min-height: 100%;
        max-width: unset;
        max-height: unset;
        aspect-ratio: 16 / 9;
        -o-object-fit: cover;
           object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    }

    .media-wrapper.background :is(.wp-video, .mejs-container) {
        height: 100% !important;
        width: 100% !important;
        background-color: transparent;
    }

    .media-wrapper .wp-video-shortcode.background {
        pointer-events: none !important;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }

    .media-wrapper .wp-video-shortcode.background :is(.mejs-controls, .mejs-layers) {
        display: none !important;
    }
    
    /* Breakpoints */
    @media screen and (width <= 920px) {
        /* I. General */
        :root {
            --page-padding: .9375rem;
        }

        /* IV. Buttons Wrapper */
        .buttons {
            gap: .75rem;
        }

        /* V. Text Content Wrapper */
        .text-content {
            --gap: 1.25rem;
        }
    }
}