/* @group Scrollable-pinned-section
------------------------------------ */
.scrollable-pinned-section-container {
    isolation: isolate;
}
.scrollable-pinned-section {
    position: relative;
    overflow: hidden;
    z-index: -1;
}

.scrollable-pinned-section .container {
    padding: 0 2rem;
}
.scrollable-pinned-section .wp-block-bp-core-bp-container {
    display: flex;
    flex-direction: column;
}
.scrollable-pinned-section .image-box {
    margin-top: 2.4rem;
}
.scrollable-pinned-section .image-box .bp-multimedia {
    width: 100%;
}
.scrollable-pinned-section:is(.first, .third) .bp-multimedia {
    height: 22.5rem;
    box-shadow: 0 12px 16px -4px rgba(65, 75, 90, 0.15), 0 4px 6px -2px rgba(65, 75, 90, 0.10);
}
.scrollable-pinned-section:is(.second, .fourth) .bp-multimedia {
    height: 19rem;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

:where(#wrapper) .scrollable-pinned-section :is(.content-box, .image-box) {
    opacity: 0;
    --duration: 1s;
    --delay: 0.3s;
}
:where(#wrapper) .scrollable-pinned-section .image-box {
    --delay: 0.5s;
}
:where(#wrapper) .scrollable-pinned-section.active :is(.content-box, .image-box) {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
}

@media only screen
and (min-width : 961px) {
    .scrollable-pinned-section,
    .scrollable-pinned-section .wp-block-bp-core-bp-container {
        height: 100vh!important;
    }
    .scrollable-pinned-section {
        overflow: hidden;
    }
    .scrollable-pinned-section .container {
        padding: 0;
    }
    .scrollable-pinned-section .wp-block-bp-core-bp-container {
        flex-direction: row;
    }
    .scrollable-pinned-section .image-box {
        position: absolute;
        margin: 0;
    } 

    /* FIRST */
    .scrollable-pinned-section:is(.first, .third) {
        padding-block: 13vh 17.5vh;
        align-items: center;
    }
    .scrollable-pinned-section:is(.first, .third) .wp-block-bp-core-bp-container {
        align-items: center;
    }
    .scrollable-pinned-section:is(.first, .third) .image-box {
        margin: 0;
        top: 50%;
        left: 0;
        translate: 0 -50%!important;
    }
    .scrollable-pinned-section:is(.first, .third) .bp-multimedia {
        height: 48.5vh;
    }
    /* SECOND */
    .scrollable-pinned-section:is(.second, .fourth) {
        align-items: flex-end;
    }
    .scrollable-pinned-section:is(.second, .fourth) .content-box {
        padding: 0 0 15.6vh;
    }
    .scrollable-pinned-section:is(.second, .fourth) .wp-block-bp-core-bp-container {
        align-items: flex-end;
    }
    .scrollable-pinned-section:is(.second, .fourth) .image-box {
        top: 0;
        right: 0;
    }
    .scrollable-pinned-section:is(.second, .fourth) .bp-multimedia {
        height: 87.6vh;
    }

}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .scrollable-pinned-section,
    .scrollable-pinned-section .wp-block-bp-core-bp-container {
        min-height: 100vh!important;
    }
    .scrollable-pinned-section :is(.row, #important) {
        padding-inline: 0;
    }
    .scrollable-pinned-section .wp-block-bp-core-bp-container {
        justify-content: center;
    }
    .scrollable-pinned-section .content-box {
        order: -1;
        padding: 10rem 0 0;
    }
    .scrollable-pinned-section .image-box {
        position: relative;
        width: calc(100% + 2rem)!important;
    }
}

/* @end */


/* ANIMATIONS */
/* :where(#wrapper) .scrollable-pinned-section :is(.text-box, .image-box) {
	opacity: 0;
	--duration: 1s;
}
:where(#wrapper) .scrollable-pinned-section.animateActive :is(.text-box, .image-box) {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .scrollable-pinned-section.animateActive :is(.image-box) {
	--delay: 0.4s;
}
:where(#wrapper) .scrollable-pinned-section.animateActive :is(.text-box) {
	--delay: 0.6s;
} */
/* @end */

.editor-styles-wrapper .scrollable-pinned-section {
    z-index: auto;
}
.editor-styles-wrapper .scrollable-pinned-section,
.editor-styles-wrapper .scrollable-pinned-section .wp-block-bp-core-bp-container > .block-editor-inner-blocks>.block-editor-block-list__layout,
.editor-styles-wrapper .scrollable-pinned-section > .block-editor-inner-blocks,
.editor-styles-wrapper .scrollable-pinned-section > .block-editor-inner-blocks>.block-editor-block-list__layout {
    height: 100rem!important;
}
.editor-styles-wrapper .scrollable-pinned-section .content-box {
    pointer-events: none;
}
.editor-styles-wrapper .scrollable-pinned-section .content-box .bp-column  {
    pointer-events: all;
}