:root {
    --page-stack-gutter: clamp(18px, 4vw, 72px);
    --page-stack-radius: clamp(16px, 1.6vw, 28px);
    --page-stack-top: 32px;
    --page-stack-gap: clamp(22px, 3vw, 48px);
    --page-stack-surface: #fff;
}

body.has-page-canvas-background {
    min-height: 100%;
    background-color: #e2ede1;
}

body.has-page-canvas-background > .main-wrapper,
body.has-page-canvas-background .main-wrapper {
    background-color: transparent;
}

.page-element-shell,
.page-element-shell__surface {
    display: contents;
}

.page-element-stack-group {
    position: relative;
    display: flow-root;
    padding-block: var(--page-stack-gap);
    isolation: isolate;
}

.page-element-stack-group > .page-element-shell--stack {
    position: relative;
    display: block;
    width: calc(100% - (2 * var(--page-stack-gutter)));
    max-width: 1720px;
    margin-inline: auto;
    padding-bottom: var(--page-stack-gap);
}

.page-element-stack-group > .page-element-shell--stack > .page-element-shell__surface {
    position: relative;
    display: block;
    min-width: 0;
    background: var(--page-stack-surface);
    border-radius: var(--page-stack-radius);
    box-shadow: 0 18px 55px rgba(35, 54, 43, .13);
    overflow: clip;
    isolation: isolate;
    transform: translateZ(0) scale(var(--page-stack-scale, 1));
    transform-origin: 50% 0;
    transition: box-shadow .25s ease;
    will-change: transform;
}

.page-element-stack-group > .page-element-shell--stack:last-child {
    padding-bottom: 0;
}

@media (min-width: 1200px) {
    .page-element-stack-group:not(.page-element-stack-group--static) > .page-element-shell--stack {
        position: sticky;
        top: calc(var(--page-stack-top) + (var(--page-stack-index, 0) * 2px));
    }
}

@media (max-width: 1199.98px) {
    :root {
        --page-stack-gutter: clamp(12px, 3vw, 28px);
        --page-stack-gap: 18px;
        --page-stack-radius: 16px;
    }

    .page-element-stack-group > .page-element-shell--stack > .page-element-shell__surface {
        transform: none !important;
        box-shadow: 0 10px 32px rgba(35, 54, 43, .1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-element-stack-group > .page-element-shell--stack > .page-element-shell__surface {
        transform: none !important;
        transition: none;
    }
}
