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

.aside-content-grid .border-block {
    padding-inline: calc(var(--row-desktop-padding) * 0.5);
    border-block: 1px solid;
    padding-block: 1rem;
}

.aside-content-grid :is(.line-middle, .line-bottom) {
    position: relative;
}

.aside-content-grid :is(.line-middle, .line-bottom)::after {
    content: '';
    background-color: #5CC0DC;
    height: 1px;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    inset-inline: 0;
}


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

.aside-content-grid .row-aside .bp-multimedia {
    width: 100%;
    height: 100%;
}

.aside-content-grid .border-block {
    margin-bottom: 2rem;
}

.aside-content-grid .row-grid .wp-block-heading {
    padding-bottom: 2rem;
}

.aside-content-grid .row-grid .bp-group {
    width: calc(100% - var(--gap-mobile));
    margin-inline: auto !important;
}

.aside-content-grid .row-aside .bp-multimedia {
    height: 37.4rem;
}

@media only screen and (min-width : 961px) {
    .aside-content-grid .row-aside :is(.bp-group, #important) {
        margin-left: calc(var(--gap-desktop) * 0.5);
    }

    .aside-content-grid .line-bottom {
        margin-bottom: 2rem;
    }

    .aside-content-grid .line-bottom::after {
        top: unset;
        translate: 0 0;
        bottom: 0;
    }


    /* .aside-content-grid :is(.line-middle, .line-bottom)::after {
        inset-inline: calc(var(--gap-desktop) * 0.5);
    } */
}

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

    /* .aside-content-grid :is(.line-middle, .line-bottom)::after {
        inset-inline: calc(var(--gap-mobile) * 0.5);
    } */

    .aside-content-grid .has-heading-3-font-size {
        --fs: 2.5rem;
    }

    .aside-content-grid .row-aside .bp-group {
        padding-inline: calc(var(--gap-mobile) * 0.5);
        --mobile-w: 100%;
    }

    .aside-content-grid .remove-gap { margin-top: -3rem; }

    .aside-content-grid:is(#expert-accounting, #community-development) .has-heading-3-font-size {
        --fs: 4rem;
        --lh: 1em;
        --ls: 0.008em;
    }

    .aside-content-grid .has-heading-4-font-size {
        --fs: 2rem;
    }
}

/* @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;
}