/* @group Text Beside Image
------------------------------------ */
.text-and-illustration {
    position: relative;
    z-index: var(--z-index-medium-low);
    --row-default: 126.5rem;
    padding: 8rem 0 0;
}

.text-and-illustration .text :is(.wp-block-heading, p) {
    color: var(--blue);
}

.text-and-illustration .text .wp-block-image>img {
    object-fit: contain;
}

.text-and-illustration .text .wp-block-heading {
    margin: 0 0 2rem;
}

.text-and-illustration .text p {
    margin: 0 0 4rem;
}

.text-and-illustration .image .wp-block-image {
    width: 26.6rem;
    height: 29.7rem;
    margin: 0;
}

@media only screen and (min-width : 961px) {
    .text-and-illustration {
        padding: 15rem 0 8.4rem;
    }

    .text-and-illustration .text .wp-block-image {
        margin: 0 0 2.9rem;
    }

    .text-and-illustration .text .wp-block-heading {
        margin: 0 0 2rem;
    }

    .text-and-illustration .text p {
        font-size: 2rem;
        line-height: 150%;
        letter-spacing: .03em;
    }

    .text-and-illustration .image {
        position: absolute;
        top: -6.3rem;
        right: 0;
        pointer-events: none;
    }

    .text-and-illustration .image .wp-block-image {
        width: 88.8rem;
        height: 100.3rem;
    }

    .wp-admin .text-and-illustration *:not(.image) {
        position: static;
    }
}

@media only screen and (min-width : 961px) and (max-width : 1440px) {}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .text-and-illustration .image {
        padding: 0 !important;
        overflow: hidden;
        margin-top: -10rem;
    }

    .text-and-illustration .image .wp-block-image {
        margin-left: auto;
        left: 5rem;
        pointer-events: none;
    }

    .text-and-illustration .wp-block-button__link {
        padding: 1.5rem 2rem !important;
    }
}

/* @end */

.wp-admin .text-and-illustration .image .wp-block-image {
    pointer-events: none;
}


/* ANIMATIONS */
body:not(.wp-admin) .text-and-illustration :is(h2, p, a, img) {
    opacity: 0;
    --duration: 1s;
}

body:not(.wp-admin) .text-and-illustration.animateActive :is(h2, p, a, img) {
    animation: fadeUp var(--duration) forwards;
    animation-delay: var(--delay, 0);
} 

body:not(.wp-admin) .text-and-illustration.animateActive p {
    --delay: 0.25s;
}
body:not(.wp-admin) .text-and-illustration.animateActive img {
    --delay: 0.25s;
}
body:not(.wp-admin) .text-and-illustration.animateActive a {
    --delay: 0.5s;
}