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

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

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

.cta-twins :is(.row, #important) {
    align-items: stretch;
}

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


    .cta-twins .bp-column {
        padding-block: 4.9rem;
    }

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


}

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

    .cta-twins .row {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }

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

    .cta-twins .group-right a {
        padding-left: 3rem;
    }

    .cta-twins .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;
}