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

.title-image .divided-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr;
    list-style: none;
    padding: 0;
}

.title-image .divided-list li {
    display: flex;
}

.title-image .divided-list li:nth-of-type(even)::before {
    content: '|';
    color: var(--light-purple);
    margin-right: 1rem;
}

@media only screen and (min-width : 961px) {
    .title-image .bp-multimedia {
        height: 70rem;
    }

    .title-image .bp-group {
        padding-bottom: 5rem;
    }
}

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

    .title-image .bp-column:not(:first-child):not(.no-mobile-border) {
        border-top: 1px solid var(--light-purple, #8E6980);
        padding-top: 2rem;
        margin-top: 2rem;
    }

    .title-image .bp-multimedia {
        height: 139vw;
    }

    .title-image.small-mobile .bp-multimedia {
        height: 77.5vw;
    }

    .title-image.smallest-mobile .bp-multimedia {
        height: 54.54vw;
    }

    .title-image.smallest-mobile .bp-column:not(:first-child) {
        border-top: unset;
        padding-top: unset;
        margin-top: unset;
    }

    .title-image .bp-multimedia {
        padding-bottom: 1.5rem;
    }

    .title-image .wp-block-heading {
        padding-bottom: 0.6rem;
    }

    .title-image .col-list {
        padding-top: 2.5rem;
        border-top: 1px solid var(--light-purple);
    }

    .title-image .col-list li {
        --fs: 1.5rem;
    }
}

/* @end */


/* Animations
------------------------------------ */
@media only screen 
and (min-width : 961px) {
    :where(#wrapper) .title-image .wp-block-heading {
        translate: 0 20% 0;
        --duration: 1s;
    }
    :where(#wrapper) .title-image .wp-block-heading.animateActive {
        animation: fullUp var(--duration) forwards;
        animation-delay: var(--delay, 0);
        --delay: 0.3s;
    }
    :where(#wrapper) .title-image .bp-multimedia {
        background: var(--white);
        clip-path: inset(2%);
        transition: all 1.5s;
    }
    :where(#wrapper) .title-image.animateActive .bp-multimedia {
        clip-path: inset(0);
    }
}
@media only screen 
and (min-width : 0) 
and (max-width : 960px) {
    :where(#wrapper) .title-image > :is(.row, .bp-group) {
        opacity: 0;
        --duration: 1s;
    }
    :where(#wrapper) .title-image.animateActive > :is(.row, .bp-group) {
        animation: fade var(--duration) forwards;
        animation-delay: var(--delay, 0);
    }
    :where(#wrapper) .title-image.animateActive > :is(.bp-group) {
        --delay: 0.3s;
    }
    :where(#wrapper) .title-image.animateActive > :is(.row) {
        --delay: 0.6s;
    }
}