/* @group article-with-images
------------------------------------ */

.article-with-images .bp-multimedia {
    border-radius: 1rem;
    overflow: hidden;
    height: 30rem;
}


@media only screen and (min-width : 961px) {
    .article-with-images .sticky-col {
        position: sticky;
        top: 10rem;
    }
    .article-with-images .bp-multimedia {
        height: 60rem;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .article-with-images {
        position: relative;
    }
    .article-with-images .wp-block-heading {
        margin-bottom: 3rem;
        --fs: 3rem;
    }
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .article-with-images :is(.sticky-col, .scroll-col) {
    opacity: 0;
    --duration: 1s;
}

:where(#wrapper) .article-with-images.animateActive :is(.sticky-col, .scroll-col) {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
}

@media only screen 
and (min-width : 961px) {
    :where(#wrapper) .article-with-images :is(.scroll-col) {
        --delay: 0.3s;
    }
    :where(#wrapper) .article-with-images :is(.sticky-col) {
        --delay: 0.5s;
    }
}
@media only screen 
and (min-width : 0) 
and (max-width : 960px) {
    :where(#wrapper) .article-with-images :is(.sticky-col, .scroll-col) {
        --delay: 0.3s;
    }
}