:root {
    --page-padding: 300px;
}

body {
    background: white !important;
    color: var(--wp--preset--color--primary);
}


@media (min-width: 768px) and (max-width: 1191px) {
    :root {
        --page-padding: 100px;
    }

}

@media (max-width: 768px) {
    :root {
        --page-padding: 35px;
    }

    .blou-header {
        position: fixed;
        bottom: 0;
        z-index: 50;
        order: 2;
    }

    body .wp-block-gallery {
        padding-bottom: calc(var(--header-height) * 2);
    }

    body.is-open .page-overlay {
        opacity: 0.44;
        pointer-events: all;
    }

    .image-wrapper.decoration {
        display: none;
    }
}

.page-wrapper {
    padding: 0 var(--page-padding);
    padding-top: 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding-bottom: 99px;
}

.page-overlay {
    position: absolute;
    inset: 0;
    background: var(--wp--preset--color--background);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}

.page-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wp-block-blou-page-wrapper:hover {
    background: #5422ef10;
}

.separator {
    width: 70%;
    height: .5px;
    background: var(--wp--preset--color--primary);
    margin-right: auto;
    margin-left: auto;
    margin-top: 6px;
    margin-bottom: 6px;
}

.image-wrapper.decoration img {
    width: 40px;
    aspect-ratio: 1 / 1;
}

.liner {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
}

.dev-note {
    text-align: center;
    width: 100%;
    font-size: .4rem;
}

.dev-note a {
    text-transform: lowercase;
}