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

.text-between-lines .bp-column {
    position: relative;
}
.text-between-lines .bp-column::after,
.text-between-lines .bp-column::before {
    content: "";
    position: absolute;
    background-color: var(--light-purple);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
}
.text-between-lines .bp-column::before {
    bottom: 0;
    top: auto;
}
.text-between-lines .bp-group {
    margin-inline: auto !important;
}
@media only screen and (min-width : 961px) {
    .text-between-lines .bp-column {
        padding-block: 5rem;
    }
    .text-between-lines .bp-column::after,
    .text-between-lines .bp-column::before {
        width: calc(100% - 4rem);
    }
}
@media only screen and (min-width : 0) and (max-width : 960px) {
    .text-between-lines .bp-column {
        padding-block: 1.5rem;
    }
    .text-between-lines p:not(.has-body-item-font-size) {
        --fs: 1.7rem;
    }
    
}

/* @end */

/* Animations
------------------------------------ */
:where(#wrapper) .text-between-lines .bp-column > * {
    opacity: 0;
    --duration: 1s;
}

:where(#wrapper) .text-between-lines.animateActive .bp-column > * {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
}

:where(#wrapper) .text-between-lines.animateActive .bp-column > * {
    --delay: 0.3s;
}