/* @group Example
------------------------------------ */

.cta-aside {
    position: relative;
    --_b: 1px solid var(--tower-red);
}





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

    .cta-aside {
        border-top: var(--_b);
    }

    .cta-aside .bp-column {
        padding-block: 10.7rem;
    }

    .cta-aside .group-left .wp-block-heading {
        max-width: 59rem;
    }

    .cta-aside .group-right {
        border-left: var(--_b);
    }

    .cta-aside :is(.group-right, #important) {
        padding-left: 2rem;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {

    .cta-aside {
        border-top: var(--_b);
    }

    .cta-aside .group-left::after {
        content: '';
        bottom: 0;
        left: 50%;
        translate: -50% 0;
        position: absolute;
        width: 100vw;
        height: 1px;
        background: var(--tower-red);
    }

    .cta-aside .bp-column {
        padding-block: 3rem;
    }
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .contenedor .elemento {
    opacity: 0;
    --duration: 1s;
}

:where(#wrapper) .contenedor.animateActive .elemento {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
}

:where(#wrapper) .contenedor.animateActive .elemento {
    --delay: 0.3s;
}