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

.content-aside .divided-content {
    padding-block: 2.5rem;
    border-top: 1px solid var(--light-purple);
}

.content-aside .divided-content ul {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.content-aside .bp-multimedia+.has-body-legal-font-size {
    margin-top: .5rem;
}

.content-aside .has-body-legal-font-size {
    --fs: 1.6rem;
    --lh: 1.4em;
}

.content-aside .wp-block-heading {
    text-wrap: balance;
}


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

@media only screen and (min-width : 0) and (max-width : 960px) {
    .content-aside .bp-multimedia {
        padding-bottom: 1.5rem;
    }

    .content-aside .bp-multimedia {
        height: 81.13vw;
    }

    .content-aside:is(.big-mobile) .bp-multimedia {
        height: 83.31vw;
    }

    .content-aside .divided-content {
        padding-top: 2rem;
        border-style: solid;
        border-width: 1px 0 0 0;
        border-color: var(--light-purple, #8E6980);
    }

    .content-aside .bp-multimedia {
        padding-bottom: 1.5rem;
    }

    .content-aside .wp-block-heading br {
        display: none;
    }

    .content-aside:not(.show-lines) .divided-content:first-of-type:has(+ .divided-content) {
        border: none;
    }

    .content-aside .full-width-mobile :is(.bp-column, #important):has(.wp-block-heading) {
        --_row-extra-pad: calc(var(--row-mobile-padding) - var(--gap-mobile));
        --_row-width: calc(var(--row-default) + var(--_row-extra-pad));
        padding-inline: var(--_row-extra-pad);
        max-width: var(--_row-width) !important;
    }

}

/* @end */


/* Animations
------------------------------------ */

@media only screen 
and (min-width : 961px) {
    :where(#wrapper) .content-aside .wp-block-heading:not(.has-heading-5-font-size) {
        translate: 0 20% 0; 
        --duration: 1s;
    }
    :where(#wrapper) .content-aside .wp-block-heading:not(.has-heading-5-font-size).animateActive {
        animation: fullUp var(--duration) forwards;
        animation-delay: var(--delay, 0);
        --delay: 0.3s;
    }
    :where(#wrapper) .content-aside .bp-multimedia {
        background: var(--white);
        clip-path: inset(10%);
        transition: all 1.5s;
    }
    :where(#wrapper) .content-aside.animateActive .bp-multimedia {
        clip-path: inset(0);
    }
}
@media only screen 
and (min-width : 0) 
and (max-width : 960px) {
    :where(#wrapper) .content-aside .bp-column {
        opacity: 0;
        --duration: 1s;
    }
    :where(#wrapper) .content-aside.animateActive .bp-column  {
        animation: fade var(--duration) forwards;
        animation-delay: var(--delay, 0);
        --delay: 0.3s;
    }
}